/* ============================================================
   JiffyScore AI — LIGHT THEME
   Light-mode token overrides for all four brand palettes.
   The whole app is token-driven, so flipping html[data-mode="light"]
   re-skins every page. Loaded AFTER tokens + components so these win.
   Dark mode is the default (no overrides needed).
   ============================================================ */

/* ---- DEFAULT (Estate · emerald + gold + lime) ---------------------- */
html[data-mode="light"] {
  --off: #F4F2E8;
  --bg-2: #ECE9DC;
  --white: #FFFFFF;
  --cream: #FCFBF4;
  --cream-2: #F2F0E4;
  --surface-2: #E9E5D6;

  --ink: #16271C;
  --ink-2: #213120;
  --ink-soft: #54624F;
  --mute: #8A9282;

  --line: rgba(34, 58, 38, 0.16);
  --line-soft: rgba(34, 58, 38, 0.09);
  --line-cool: rgba(34, 58, 38, 0.10);

  --gold: #8A6708;            /* deep enough to read as text on paper */
  --gold-deep: #6E5206;
  --gold-soft: rgba(138, 103, 8, 0.12);
  --gold-glow: rgba(232, 181, 60, 0.30);

  --lime: #5C9A2A;            /* readable green for "good" figures */
  --lime-2: #6DB23A;
  --lime-deep: #4C7F22;
  --lime-gradient: linear-gradient(135deg, #B6EF6E 0%, #93D94F 55%, #76C233 100%);
  --on-lime: #0E2012;

  --coral: #C8502E;
  --coral-soft: rgba(200, 80, 46, 0.13);
  --amber: #A8780C;
  --emerald: #2E9E54;
  --emerald-soft: rgba(46, 158, 84, 0.13);

  --shadow-1: 0 1px 0 rgba(30, 45, 30, 0.04), 0 1px 2px rgba(30, 45, 30, 0.07);
  --shadow-2: 0 10px 28px -10px rgba(30, 50, 34, 0.18), 0 2px 6px rgba(30, 50, 34, 0.08);
  --shadow-3: 0 36px 80px -28px rgba(30, 50, 34, 0.24), 0 10px 24px rgba(30, 50, 34, 0.12);
  --glow-gold: 0 0 0 1px rgba(168, 120, 12, 0.40), 0 0 18px rgba(232, 181, 60, 0.20);
  --glow-lime: 0 0 0 1px rgba(118, 194, 51, 0.50), 0 0 20px rgba(118, 194, 51, 0.24);
}

/* ---- OCEAN (deep blue + silver + azure) ---------------------------- */
html[data-mode="light"][data-brand="ocean"] {
  --off: #EEF3FA;
  --bg-2: #E1EAF5;
  --white: #FFFFFF;
  --cream: #F6F9FE;
  --cream-2: #E9F0F9;
  --surface-2: #DFE8F4;
  --ink: #0F2138;
  --ink-2: #1B3050;
  --ink-soft: #4C5E74;
  --mute: #8893A4;
  --line: rgba(28, 62, 104, 0.16);
  --line-soft: rgba(28, 62, 104, 0.09);
  --line-cool: rgba(28, 62, 104, 0.10);
  --gold: #56687F;
  --gold-deep: #41526A;
  --gold-soft: rgba(86, 104, 127, 0.14);
  --lime: #2C72C0;
  --lime-2: #2D7FE3;
  --lime-deep: #205FA8;
  --lime-gradient: linear-gradient(135deg, #8FCFFF 0%, #5BA0F5 55%, #2D7FE3 100%);
  --on-lime: #07182A;
  --coral: #C8502E;
  --emerald: #2E9E54;
  --amber: #56687F;
  --glow-gold: 0 0 0 1px rgba(86, 104, 127, 0.40), 0 0 18px rgba(120, 140, 170, 0.20);
  --glow-lime: 0 0 0 1px rgba(91, 160, 245, 0.50), 0 0 20px rgba(91, 160, 245, 0.24);
}

/* ---- SAND (clay + terracotta + champagne) -------------------------- */
html[data-mode="light"][data-brand="sand"] {
  --off: #F7F1E7;
  --bg-2: #F0E6D7;
  --white: #FFFDF8;
  --cream: #FBF6ED;
  --cream-2: #F2E8D9;
  --surface-2: #EEE4D3;
  --ink: #2C2014;
  --ink-2: #3A2C1C;
  --ink-soft: #6A5B48;
  --mute: #9B8D78;
  --line: rgba(120, 88, 48, 0.18);
  --line-soft: rgba(120, 88, 48, 0.10);
  --line-cool: rgba(120, 88, 48, 0.10);
  --gold: #9A6A2E;
  --gold-deep: #7C5320;
  --gold-soft: rgba(154, 106, 46, 0.14);
  --lime: #A87513;
  --lime-2: #C2932E;
  --lime-deep: #8A6010;
  --lime-gradient: linear-gradient(135deg, #F2D67E 0%, #DDB24E 55%, #C2932E 100%);
  --on-lime: #2A1F10;
  --coral: #C8502E;
  --emerald: #4E913F;
  --amber: #9A6A2E;
  --glow-gold: 0 0 0 1px rgba(154, 106, 46, 0.40), 0 0 18px rgba(216, 150, 90, 0.20);
  --glow-lime: 0 0 0 1px rgba(194, 147, 46, 0.50), 0 0 20px rgba(194, 147, 46, 0.24);
}

/* ---- FOREST (pine + copper + moss) --------------------------------- */
html[data-mode="light"][data-brand="forest"] {
  --off: #EFF3EA;
  --bg-2: #E3EBDA;
  --white: #FFFFFF;
  --cream: #F5F9F0;
  --cream-2: #E9F1E1;
  --surface-2: #E1EAD8;
  --ink: #14241A;
  --ink-2: #1F3326;
  --ink-soft: #51604E;
  --mute: #859180;
  --line: rgba(58, 90, 54, 0.16);
  --line-soft: rgba(58, 90, 54, 0.09);
  --line-cool: rgba(58, 90, 54, 0.10);
  --gold: #A05826;
  --gold-deep: #80451B;
  --gold-soft: rgba(160, 88, 38, 0.13);
  --lime: #5A8E34;
  --lime-2: #6FA544;
  --lime-deep: #487428;
  --lime-gradient: linear-gradient(135deg, #A6D27A 0%, #84B85B 55%, #5E9437 100%);
  --on-lime: #0E2012;
  --coral: #C8502E;
  --emerald: #3E9148;
  --amber: #A05826;
  --glow-gold: 0 0 0 1px rgba(160, 88, 38, 0.40), 0 0 18px rgba(216, 139, 79, 0.20);
  --glow-lime: 0 0 0 1px rgba(132, 184, 91, 0.50), 0 0 20px rgba(132, 184, 91, 0.24);
}

/* ============================================================
   Light-mode fixups for gold-FILLED surfaces that carry text.
   In light mode --gold is dark (for legible gold text), so any
   element that uses a gold fill needs light text instead of the
   default dark --on-lime. Lime fills are unaffected (still bright).
   ============================================================ */
html[data-mode="light"] .btn--gold,
html[data-mode="light"] .js-roleswitch-btn .rs-glyph,
html[data-mode="light"] .js-menu-item.is-active .mi-glyph,
html[data-mode="light"] .persona.is-selected .glyph,
html[data-mode="light"] .tier.is-pro::before,
html[data-mode="light"] .pref-palette.is-on .pp-check {
  color: #FCFBF4;
}
html[data-mode="light"] .persona.is-selected .check::after {
  border-color: #FCFBF4;
}
/* selection: gold bg is dark in light mode, so use light text */
html[data-mode="light"] ::selection { background: var(--gold); color: #FCFBF4; }

/* ============================================================
   Smooth cross-fade when the user flips appearance / palette.
   Applied only for ~450ms via the .mode-anim class on <html>.
   ============================================================ */
html.mode-anim, html.mode-anim *, html.mode-anim *::before, html.mode-anim *::after {
  transition: background-color 0.45s ease, color 0.35s ease, border-color 0.45s ease,
              fill 0.45s ease, stroke 0.45s ease, box-shadow 0.45s ease !important;
}