/* =============================================================================
   TECHCLICK — Home Theme v2  ·  "Light & Premium"
   -----------------------------------------------------------------------------
   Converts the homepage from the dark theme to a bright, clean, trustworthy
   look with the orange brand kept as the accent.

   How it works:
   - Linked LAST in index.html, and only there, so NO other page is affected.
   - The homepage is built from THREE colour palettes (--bg-*, --rd-*, --pm-*).
     Re-pointing all three to light values flips the whole page in one move;
     a few hand-written rules clean up the bits that hard-code dark colours.
   - Everything is scoped to `[data-theme="light"]`, so DIM/DARK stays the
     DEFAULT and this premium light look appears ONLY when a visitor chooses
     "☀️ Light" from the site's existing theme menu (Dim · Dark · Light,
     managed by header.js). Remove this one <link> to fully revert.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Flip all three palettes to light  (the heavy lifting)
   --------------------------------------------------------------------------- */
:root[data-theme="light"] {

  /* ---- original tokens (styles.css) ---- */
  --bg-dark:#f5f1ea;  --bg-darker:#efe9e0;  --bg-card:#ffffff;
  --bg-glass:rgba(20,15,10,.03);  --bg-glass-strong:rgba(20,15,10,.06);
  --text-primary:#1a1410;  --text-secondary:#5f574e;  --text-muted:#8b827a;
  --border-subtle:1px solid rgba(20,15,10,.10);
  --border-glow:1px solid rgba(255,140,60,.32);
  --surface-1:#ffffff; --surface-2:#faf6f0; --surface-3:#f3ede5; --surface-hover:#efe9e1;
  --surface-border:rgba(20,15,10,.10); --surface-border-strong:rgba(255,140,60,.40);
  --gradient-hero: linear-gradient(180deg,#fefdfb 0%, #f3eee6 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,140,60,.06), rgba(255,157,60,.03));
  --gradient-mesh: radial-gradient(ellipse at 50% 0%, rgba(255,157,60,.10) 0%, transparent 55%);
  --shadow-lg:0 25px 50px -18px rgba(40,25,10,.20);
  --shadow-glow:0 0 40px rgba(255,157,60,.18);
  --shadow-card:0 12px 30px -16px rgba(40,25,10,.18);

  /* ---- redesign palette (home-redesign.css) — drives most cards & text ---- */
  --rd-bg:#f5f1ea;  --rd-bg2:#efe9e0;
  --rd-surface:#ffffff;  --rd-surface2:#faf6f0;  --rd-surface3:#f3ede5;
  --rd-ember-soft:#ff8a4d;  --rd-ember:#ff7a36;  --rd-ember-600:#f0611c;  --rd-ember-700:#cf4d12;
  --rd-amber:#d98309;
  --rd-t1:#1a1410;  --rd-t2:#5f574e;  --rd-t3:#857c73;  --rd-t-ember:#c2410c;
  --rd-line:rgba(20,15,10,.10);  --rd-line2:rgba(20,15,10,.15);  --rd-line-ember:rgba(255,122,54,.35);
  --rd-live:#16a34a;
  --rd-sh-sm:0 1px 2px rgba(40,25,10,.10);
  --rd-sh-md:0 6px 16px -8px rgba(40,25,10,.16);
  --rd-sh-lg:0 16px 38px -16px rgba(40,25,10,.20);
  --rd-sh-xl:0 30px 70px -28px rgba(40,25,10,.26);
  --rd-sh-ember:0 10px 30px -10px rgba(255,120,40,.40);
  --rd-hi:inset 0 1px 0 rgba(255,255,255,.85);

  /* ---- premium palette (home-premium.css) — drives the tools section ---- */
  --pm-ink:#f5f1ea;
  --pm-surface:#ffffff;  --pm-surface-2:#faf6f0;
  --pm-hair:rgba(20,15,10,.09);  --pm-hair-2:rgba(20,15,10,.14);
  --pm-text:#1a1410;  --pm-text-2:#5f574e;  --pm-text-3:#857c73;
  --pz-sm:0 1px 2px rgba(40,25,10,.10);
  --pz-md:0 6px 16px -8px rgba(40,25,10,.16);
  --pz-lg:0 16px 38px -16px rgba(40,25,10,.20);
  --pz-em:0 10px 30px -10px rgba(255,120,40,.35);
  --pz-hi:inset 0 1px 0 rgba(255,255,255,.85);

  /* ---- v2 section-rhythm tokens ---- */
  --tcv2-band:#ffffff;  --tcv2-band-2:#f4eee6;
  --tcv2-hair:rgba(20,15,10,.08);
}

/* ---------------------------------------------------------------------------
   2. Base canvas
   --------------------------------------------------------------------------- */
html[data-theme="light"] body {
  background:#f4eee6 !important;
  color:#1a1410 !important;
  -webkit-font-smoothing:antialiased;
}
/* the fixed full-page vignette was tuned for black — warm + faint for light */
html[data-theme="light"] body::before {
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(255,150,70,.10) 0%, transparent 46%),
    radial-gradient(140% 90% at 50% 120%, rgba(255,120,90,.06) 0%, transparent 55%) !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 { color:#16110c; letter-spacing:-0.022em; }

/* ---------------------------------------------------------------------------
   3. Navbar — frosted white
   --------------------------------------------------------------------------- */
html[data-theme="light"] .navbar {
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(20,15,10,.08) !important;
  box-shadow:0 2px 24px -14px rgba(40,25,10,.30) !important;
}
html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .navbar a { color:#3a322b !important; }
html[data-theme="light"] .navbar .nav-link:hover { color:#e35a16 !important; }

/* ---------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------- */
html[data-theme="light"] .hero {
  background:
    radial-gradient(55% 55% at 82% 4%,  rgba(255,140,60,.18), transparent 60%),
    radial-gradient(48% 50% at 6% 92%,  rgba(255,90,70,.10),  transparent 60%),
    linear-gradient(180deg,#fefdfb 0%, #f2ece3 100%) !important;
}
html[data-theme="light"] .hero::before { display:none !important; }
html[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(20,15,10,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,15,10,.035) 1px, transparent 1px) !important;
  opacity:.5;
}
html[data-theme="light"] .hero-text h1 { color:#16110c !important; }
html[data-theme="light"] .hero-text p  { color:#5a5249 !important; }
html[data-theme="light"] .hero-eyebrow {
  color:#8f3d11 !important;            /* darkened for WCAG AA on the peach pill (~4.9:1) */
  background:rgba(255,140,60,.14) !important;
  border-color:rgba(255,140,60,.35) !important;
}
html[data-theme="light"] .hero-stats-bar {
  background:#ffffff !important;
  border:1px solid rgba(20,15,10,.10) !important;
  box-shadow:0 14px 34px -18px rgba(40,25,10,.28) !important;
}
html[data-theme="light"] .hs-num { color:#16110c !important; }
html[data-theme="light"] .hs-label { color:#7a7269 !important; }
/* The firewall-policy console stays DARK on purpose — a striking product
   "screenshot" anchoring the bright hero. Just refine its shadow for light. */
html[data-theme="light"] .hero-console,
html[data-theme="light"] .hero-simulator-preview {
  box-shadow:0 40px 90px -36px rgba(40,25,10,.45), 0 0 0 1px rgba(20,15,10,.06) !important;
}

/* ---------------------------------------------------------------------------
   5. Trust strip
   --------------------------------------------------------------------------- */
html[data-theme="light"] .partners-strip {
  background:#ffffff !important;
  border-top:1px solid rgba(20,15,10,.07) !important;
  border-bottom:1px solid rgba(20,15,10,.07) !important;
}
html[data-theme="light"] .partners-strip .ps-label { color:#635c55 !important; } /* AA on white (~4.8:1) */
html[data-theme="light"] .partners-strip .ps-mark { color:#3a322b !important; opacity:.7; }
html[data-theme="light"] .partners-strip .ps-mark:hover { color:#e35a16 !important; opacity:1; }

/* ---------------------------------------------------------------------------
   6. Section rhythm — alternate white / warm cream so the page breathes
   --------------------------------------------------------------------------- */
html[data-theme="light"] .about-section      { background:#ffffff !important; }
html[data-theme="light"] .courses-section     { background:#f4eee6 !important; }
html[data-theme="light"] .platform-section    { background:#ffffff !important; }
html[data-theme="light"] .experience-section  { background:#f4eee6 !important; }
html[data-theme="light"] .ai-study-section    { background:#ffffff !important; }
html[data-theme="light"] .internship-section  { background:#f4eee6 !important; }
html[data-theme="light"] .job-section         { background:#ffffff !important; }
html[data-theme="light"] .testimonials-section{ background:#f4eee6 !important; }
/* Consultation = a soft ember CTA band so the "Book a 1:1" stands out */
html[data-theme="light"] .consultation-section {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255,140,60,.16), transparent 60%),
    linear-gradient(180deg,#fff4ea,#fbe9da) !important;
}
html[data-theme="light"] .section-header p { color:#5f574e !important; }

/* the v2 "glowing seam" dividers — make them a quiet hairline on light */
html[data-theme="light"] .about-section,
html[data-theme="light"] .courses-section,
html[data-theme="light"] .platform-section,
html[data-theme="light"] .experience-section,
html[data-theme="light"] .ai-study-section,
html[data-theme="light"] .internship-section,
html[data-theme="light"] .job-section,
html[data-theme="light"] .consultation-section,
html[data-theme="light"] .testimonials-section { border-top:1px solid rgba(20,15,10,.06) !important; }
html[data-theme="light"] .about-section::before,
html[data-theme="light"] .courses-section::before,
html[data-theme="light"] .platform-section::before,
html[data-theme="light"] .experience-section::before,
html[data-theme="light"] .ai-study-section::before,
html[data-theme="light"] .internship-section::before,
html[data-theme="light"] .job-section::before,
html[data-theme="light"] .consultation-section::before,
html[data-theme="light"] .testimonials-section::before {
  background:linear-gradient(90deg,transparent,rgba(255,140,60,.45),transparent) !important;
}
/* section title accent underline */
html[data-theme="light"] .section-header h2::after {
  content:""; display:block; width:54px; height:3px; margin:.85rem auto 0;
  border-radius:9999px; background:linear-gradient(90deg,#ff9d3c,#ff6a3d);
}

/* ---------------------------------------------------------------------------
   7. Cards — white with soft, realistic shadows and a lift on hover
   --------------------------------------------------------------------------- */
html[data-theme="light"] .course-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .testi-card,
html[data-theme="light"] .platform-card,
html[data-theme="light"] .experience-card,
html[data-theme="light"] .ai-study-checks div,
html[data-theme="light"] .training-card,
html[data-theme="light"] .about-feature,
html[data-theme="light"] .card {
  background:#ffffff !important;
  border:1px solid rgba(20,15,10,.09) !important;
  box-shadow:0 12px 30px -18px rgba(40,25,10,.22), 0 2px 6px -4px rgba(40,25,10,.12) !important;
  transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease;
}
html[data-theme="light"] .course-card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .testi-card:hover,
html[data-theme="light"] .platform-card:hover,
html[data-theme="light"] .training-card:hover,
html[data-theme="light"] .card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(40,25,10,.30), 0 0 0 1px rgba(255,140,60,.32) !important;
  border-color:rgba(255,140,60,.40) !important;
}
/* card text */
html[data-theme="light"] .course-card h3,
html[data-theme="light"] .platform-card h3,
html[data-theme="light"] .testi-card h3,
html[data-theme="light"] .card h3,
html[data-theme="light"] .stat-card h3 { color:#16110c !important; }
html[data-theme="light"] .course-card p,
html[data-theme="light"] .platform-card p,
html[data-theme="light"] .testi-card p,
html[data-theme="light"] .card p,
html[data-theme="light"] .stat-card p,
html[data-theme="light"] .about-feature,
html[data-theme="light"] .about-content p,
html[data-theme="light"] .ai-study-copy p,
html[data-theme="light"] .ai-study-checks span { color:#5f574e !important; }
html[data-theme="light"] .about-content strong { color:#c2410c !important; }
html[data-theme="light"] .ai-study-copy h2 { color:#16110c !important; }

/* category chips & badges — quieter tints so they don't shout on white */
html[data-theme="light"] .cat-chip {
  background:rgba(255,140,60,.10) !important; border-color:rgba(20,15,10,.10) !important;
}

/* ---------------------------------------------------------------------------
   7b. Course-card component (rendered by js/render-course-cards.js)
   It ships its own self-contained oklch token system on .tc-card-grid /
   .courses-grid. Re-point its semantic tokens to light so the card internals
   (category pill, "70 hrs / 35 sessions" meta chips, syllabus link) flip too.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .tc-card-grid,
html[data-theme="light"] .courses-grid {
  --surface:#ffffff;
  --surface-elevated:#ffffff;
  --surface-raised:#f7f2ec;
  --surface-sunken:#f1ebe2;
  --text-primary:#16110c;
  --text-secondary:#4f463d;
  --text-tertiary:#6b6258;
  --text-quaternary:#8a8178;
  --border-subtle:rgba(20,15,10,.10);
  --border-soft:rgba(20,15,10,.14);
  --border-strong:rgba(20,15,10,.20);
  --shadow-sm:0 1px 2px rgba(40,25,10,.10);
  --shadow-md:0 6px 16px -8px rgba(40,25,10,.16);
  --shadow-lg:0 16px 38px -16px rgba(40,25,10,.22);
  --shadow-inset-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-inset-hi-strong:inset 0 1px 0 rgba(255,255,255,.9);
}
/* the "Syllabus" ghost link was a near-invisible pale grey on white */
html[data-theme="light"] .tc-cta--ghost { color:#4f463d !important; }

/* ---------------------------------------------------------------------------
   8. Buttons — primary keeps the ember pop; the rest go light & calm
   --------------------------------------------------------------------------- */
html[data-theme="light"] .btn-primary {
  background:linear-gradient(135deg,#ffb259 0%, #ff8a3d 48%, #ff6a3d 100%) !important;
  color:#241204 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 30px -8px rgba(255,130,50,.55) !important;
}
html[data-theme="light"] .btn-secondary {
  background:#ffffff !important; color:#16110c !important;
  border:1px solid rgba(20,15,10,.14) !important;
  box-shadow:0 2px 8px -4px rgba(40,25,10,.22) !important;
}
html[data-theme="light"] .btn-secondary:hover {
  background:#fff7ef !important; border-color:rgba(255,140,60,.5) !important;
}
html[data-theme="light"] .btn-ghost { color:#3a322b !important; }
html[data-theme="light"] .btn-outline { color:#c2410c !important; border-color:rgba(255,140,60,.55) !important; }

/* ---------------------------------------------------------------------------
   9. Forms (internship / job / consultation) — light inputs, dark text
   --------------------------------------------------------------------------- */
html[data-theme="light"] .application-form {
  background:#ffffff !important; border:1px solid rgba(20,15,10,.10) !important;
  box-shadow:0 18px 44px -24px rgba(40,25,10,.24) !important;
}
html[data-theme="light"] .application-form input,
html[data-theme="light"] .application-form select,
html[data-theme="light"] .application-form textarea,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background:#fbf9f6 !important; color:#16110c !important;
  border:1px solid rgba(20,15,10,.16) !important;
}
html[data-theme="light"] .application-form label,
html[data-theme="light"] label { color:#3a322b !important; }
html[data-theme="light"] ::placeholder { color:#9a9189 !important; }

/* ---------------------------------------------------------------------------
   9b. Light-mode fixes found in QA
   --------------------------------------------------------------------------- */
/* Platform "tool" cards: their tinted icon boxes collapse to a near-transparent
   white in light mode, so the white glyphs vanish on the white card. Restore a
   solid ember icon box so the (white) icons read clearly. */
html[data-theme="light"] .platform-card div:has(> svg) {
  background: linear-gradient(135deg,#ff9d3c,#ff6a3d) !important;
}
/* Footer newsletter sits on the (intentionally) dark-navy footer, but the
   global light-theme h4 rule forces it dark — make it light again here. */
html[data-theme="light"] .footer-newsletter h4 { color:#ffffff !important; }

/* ---------------------------------------------------------------------------
   10. Mobile tidy-ups + reduced motion
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  html[data-theme="light"] .course-card:hover,
  html[data-theme="light"] .platform-card:hover,
  html[data-theme="light"] .stat-card:hover,
  html[data-theme="light"] .testi-card:hover { transform:translateY(-3px); }
}
@media (prefers-reduced-motion:reduce){
  html[data-theme="light"] .course-card,
  html[data-theme="light"] .platform-card,
  html[data-theme="light"] .stat-card,
  html[data-theme="light"] .testi-card { transition:none !important; }
}