/* ============================================================
   theme-light.css — Light theme token overrides
   Link AFTER base.css. Overrides only colour tokens.
   Structural rules (spacing, radius, transitions) unchanged.
   ============================================================ */

:root {
  /* ── Backgrounds — clean white / slate ── */
  --bg:          #ffffff;
  --bg-2:        #faf9f5;   /* slate-50 */
  --surface:     #ffffff;
  --surface-2:   #f5f3ed;   /* slate-100 */
  --surface-3:   #ece9e0;   /* slate-200 */

  /* ── Borders ── */
  --border:      #ece9e0;   /* slate-200 */
  --border-2:    #d6d1c4;   /* slate-300 */
  --border-3:    rgba(0,0,0,0.06);

  /* ── Text ── */
  --tx:          #2b2a27;   /* slate-900 — primary text */
  --tx-2:        #6f6b62;   /* slate-600 — secondary text */
  --tx-3:        #aca699;   /* slate-400 — muted text */
  --tx-4:        #d6d1c4;   /* slate-300 */

  /* ── Brand colours — same hue, adjusted for light bg ── */
  --cyan:        #9a5b3c;   /* teal-600 */
  --cyan-2:      #83492d;   /* teal-700 — darker for light bg readability */
  --cyan-3:      #b5714c;   /* teal-500 */

  --emerald:     #5f7a64;
  --emerald-2:   #4d6652;   /* emerald-700 — darker for light bg */

  --purple:      #9a5b3c;   /* indigo-600 — darker for light bg */

  --amber:       #b45309;   /* amber-700 */
  --red:         #dc2626;

  --green-neon:  #9a5b3c;   /* teal-600 — replaces bright neon on light bg */
  --blue-bright: #9a5b3c;   /* sky-600 */

  /* ── Gradients — same brand, works on white ── */
  --grad-brand:  linear-gradient(135deg, #9a5b3c 0%, #5f7a64 60%, #b5714c 100%);
  --grad-cta:    linear-gradient(135deg, #9a5b3c 0%, #5f7a64 100%);
  --grad-purple: linear-gradient(135deg, #9a5b3c 0%, #9a5b3c 100%);

  /* ── Shadows — visible on white ── */
  --shadow-glow-cyan:    0 4px 24px rgba(154,91,60,.18);
  --shadow-glow-emerald: 0 4px 24px rgba(95,122,100,.18);
  --shadow-card:         0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-card-hover:   0 4px 12px rgba(0,0,0,.1), 0 8px 32px rgba(0,0,0,.08);
}

/* ── Typography — Plus Jakarta Sans for headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--tx);
}

body {
  background: var(--bg);
  color: var(--tx);
}

/* ── Scrollbar — light variant ── */
::-webkit-scrollbar-track { background: #f5f3ed; }
::-webkit-scrollbar-thumb { background: #d6d1c4; }
::-webkit-scrollbar-thumb:hover { background: #aca699; }

/* ── Cards — shadow on white ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-2);
  background: var(--surface);
}

/* ── Buttons — primary stays dark text on teal ── */
.btn-primary {
  color: #ffffff;
  box-shadow: var(--shadow-glow-cyan);
}
.btn-ghost {
  color: var(--tx-2);
  border-color: var(--border-2);
}
.btn-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(154,91,60,.06);
}

/* ── Badges — light bg variants ── */
.badge-cyan    { background: rgba(154,91,60,.08);   border-color: rgba(154,91,60,.2);   color: var(--cyan-2); }
.badge-green   { background: rgba(95,122,100,.08);   border-color: rgba(95,122,100,.2);   color: var(--emerald-2); }
.badge-purple  { background: rgba(154,91,60,.08);   border-color: rgba(154,91,60,.2);   color: var(--purple); }
.badge-amber   { background: rgba(180,83,9,.08);    border-color: rgba(180,83,9,.2);    color: var(--amber); }
.badge-red     { background: rgba(220,38,38,.08);   border-color: rgba(220,38,38,.2);   color: var(--red); }

/* ── Section eyebrow ── */
.section-eyebrow { color: var(--cyan); }

/* ── Divider ── */
.divider { background: var(--border); }