/* ============================================================
   Light Theme Overrides
   Note: All colors driven by CSS variables in style.css.
   This file adds the gradients/glassmorphism/light-specific
   styling that variables can't express cleanly.
   ============================================================ */

body.light-theme {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 20% 30%, rgba(232, 102, 0, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(255, 61, 2, 0.08) 0px, transparent 50%),
    radial-gradient(at 40% 80%, rgba(232, 102, 0, 0.06) 0px, transparent 50%);
}

body.light-theme .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
}

body.light-theme .contact-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(10px);
}

body.light-theme .hero-image-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

body.light-theme .social-icons span {
  background-color: rgba(232, 102, 0, 0.1);
  border: 1px solid rgba(232, 102, 0, 0.2);
}
body.light-theme .social-icons span:hover {
  background-color: rgba(232, 102, 0, 0.9);
}
body.light-theme .social-icons span i,
body.light-theme .social-icons span a {
  color: #495057;
}
body.light-theme .social-icons span:hover i,
body.light-theme .social-icons span:hover a {
  color: #ffffff;
}

body.light-theme .btn-outline {
  border: 2px solid #495057;
  color: #495057;
  background: rgba(255, 255, 255, 0.8);
}
body.light-theme .btn-outline:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

body.light-theme .shapes-container { opacity: 0.4; }
body.light-theme .shape {
  opacity: 0.12;
  filter: blur(60px);
}

body.light-theme .stat-box:hover,
body.light-theme .exp-card:hover,
body.light-theme .project-card:hover,
body.light-theme .skill-category:hover,
body.light-theme .cert-item:hover,
body.light-theme .edu-card:hover {
  box-shadow: 0 8px 25px rgba(232, 102, 0, 0.15);
}

body.light-theme footer { border-top-color: var(--border-color); }

/* Darker orange for active/hover nav links on light backgrounds —
   brand #e86600 measures 3.32:1 (fails AA); #c2410c clears 4.5:1. (QA-05) */
body.light-theme .nav-links a.active,
body.light-theme .nav-links a:hover { color: #c2410c; }

/* Small orange text on light backgrounds — same 3.32:1 AA failure as QA-05.
   Applies to: section eyebrow tags (13px), project Problem/Solution/Outcome
   labels (13px bold), cert card links (12px — smallest text on page),
   hero stat counters (17px semibold), and the AR language toggle (13px bold).
   #c2410c = 4.91:1 on light bg. (QA-23, final visual audit) */
body.light-theme .section-tag,
body.light-theme .project-meta-label,
body.light-theme .cert-link,
body.light-theme .stats .count,
body.light-theme .btn-lang,
/* QA-24 (visual audit): edu degree line + company lines are 14px accent
   text — same 3.32:1 AA failure class as QA-23; align with darker orange */
body.light-theme .edu-degree,
body.light-theme .exp-company { color: #c2410c; }
/* QA-24: orange hover text on light backgrounds (sidebar links, skill
   chips, contact values) — darkened to keep AA on hover states too */
body.light-theme .sidebar .sidebar-links a:hover,
body.light-theme .skill-item:hover,
body.light-theme .method-value:hover { color: #c2410c; }
/* Cert link hover keeps the brand secondary but darkened for light bg */
body.light-theme .cert-link:hover { color: #9a3412; }

/* QA-24: primary buttons + skip link keep white text on the light-theme
   brand orange (#e86600 = 3.32:1 vs white). Use the already-established
   darker pair (#c2410c = 4.91:1, #9a3412 = 7.4:1) so 14px white labels
   clear AA in light mode. Dark theme keeps the original gradient. */
body.light-theme .btn-orange,
body.light-theme .skip-link {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
}
body.light-theme .btn-orange::before {
  background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
}
body.light-theme .contact-social a:hover,
body.light-theme .social-icons span:hover {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
}

body.light-theme .overlay { background-color: rgba(0, 0, 0, 0.4); }

/* Make sure modal close button stays visible */
body.light-theme .cert-modal-close { background: var(--accent-color); }
body.light-theme .cert-modal-close:hover { background: var(--accent-secondary); }