/* ==========================================================================
   Design tokens + the three themes.
   Switch themes by setting data-theme="lemon" | "black" | "white" on <html>.
   ========================================================================== */

:root {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --sidebar-w: 268px;
  --rail-w: 78px;
  --topbar-h: 64px;
  --bottom-nav-h: 68px;
  --content-max: 1240px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur: 220ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Light lemon green (default) ---------------------------------------- */
:root,
:root[data-theme="lemon"] {
  color-scheme: light;
  --bg: #F4F9E4;
  --bg-soft: #EBF3CF;
  --surface: #FFFFFF;
  --surface-2: #F3F8E3;
  --surface-3: #E8F1CC;
  --border: #DCE7BC;
  --border-strong: #C4D595;
  --text: #17210A;
  --text-2: #44532A;
  --text-muted: #66764A;
  --primary: #8DC21F;
  --primary-hover: #7FB114;
  --on-primary: #172205;
  --primary-soft: #E5F2B8;
  --primary-ink: #466F00;
  --focus: #4E7D00;

  --success: #1F8A3E;
  --success-soft: #DDF3DF;
  --danger: #C8323A;
  --danger-soft: #FBE3E4;
  --warning: #A66B00;
  --warning-soft: #FFF0C7;
  --info: #1F66C4;
  --info-soft: #E1EDFC;

  --hero-bg: linear-gradient(135deg, #A4D83A 0%, #7DB419 55%, #5F9A0E 100%);
  --hero-fg: #101A05;
  --hero-fg-muted: rgba(16, 26, 5, .72);
  --hero-chip: rgba(255, 255, 255, .34);
  --hero-btn-bg: #101A05;
  --hero-btn-fg: #F4F9E4;

  --shadow-sm: 0 1px 2px rgba(40, 60, 0, .06), 0 1px 1px rgba(40, 60, 0, .04);
  --shadow: 0 8px 24px -10px rgba(60, 90, 0, .22), 0 2px 6px rgba(60, 90, 0, .06);
  --shadow-lg: 0 24px 60px -20px rgba(40, 70, 0, .35);
  --scrim: rgba(18, 26, 6, .5);

  /* Chart tokens – categorical order is fixed (colour follows the entity). */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300;
  --chart-line: #5E9A0A;
  --chart-grid: #E3EBCB;
  --chart-axis: #C4D595;
  --chart-label: #66764A;
}

/* ---- Premium black ------------------------------------------------------- */
:root[data-theme="black"] {
  color-scheme: dark;
  --bg: #0B0B0C;
  --bg-soft: #111113;
  --surface: #151517;
  --surface-2: #1C1C1F;
  --surface-3: #252529;
  --border: #2A2A2F;
  --border-strong: #3B3B42;
  --text: #F4F3EE;
  --text-2: #CFCEC8;
  --text-muted: #94939B;
  --primary: #E2C16B;
  --primary-hover: #EDCF84;
  --on-primary: #16120A;
  --primary-soft: rgba(226, 193, 107, .14);
  --primary-ink: #EACB7C;
  --focus: #EACB7C;

  --success: #3DD68C;
  --success-soft: rgba(61, 214, 140, .14);
  --danger: #FF7070;
  --danger-soft: rgba(255, 112, 112, .14);
  --warning: #F5B83D;
  --warning-soft: rgba(245, 184, 61, .14);
  --info: #6CA8FF;
  --info-soft: rgba(108, 168, 255, .14);

  --hero-bg: linear-gradient(135deg, #2C2515 0%, #1A1710 50%, #121214 100%);
  --hero-fg: #F6EFD9;
  --hero-fg-muted: rgba(246, 239, 217, .66);
  --hero-chip: rgba(226, 193, 107, .16);
  --hero-btn-bg: #E2C16B;
  --hero-btn-fg: #16120A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .9);
  --scrim: rgba(0, 0, 0, .66);

  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
  --chart-line: #E2C16B;
  --chart-grid: #26262A;
  --chart-axis: #3B3B42;
  --chart-label: #94939B;
}

/* ---- Clean white --------------------------------------------------------- */
:root[data-theme="white"] {
  color-scheme: light;
  --bg: #F6F8FB;
  --bg-soft: #EEF2F8;
  --surface: #FFFFFF;
  --surface-2: #F3F6FA;
  --surface-3: #E8EDF5;
  --border: #E3E8F0;
  --border-strong: #CDD6E3;
  --text: #0E1726;
  --text-2: #3A4558;
  --text-muted: #667286;
  --primary: #1F6FEB;
  --primary-hover: #1A5FCC;
  --on-primary: #FFFFFF;
  --primary-soft: #E7F0FE;
  --primary-ink: #1A5FCC;
  --focus: #1A5FCC;

  --success: #0F8A4F;
  --success-soft: #DCF4E7;
  --danger: #D12D3A;
  --danger-soft: #FCE4E6;
  --warning: #A76A00;
  --warning-soft: #FFF1CF;
  --info: #1F6FEB;
  --info-soft: #E7F0FE;

  --hero-bg: linear-gradient(135deg, #2F80FF 0%, #1F6FEB 50%, #1747B0 100%);
  --hero-fg: #FFFFFF;
  --hero-fg-muted: rgba(255, 255, 255, .78);
  --hero-chip: rgba(255, 255, 255, .2);
  --hero-btn-bg: #FFFFFF;
  --hero-btn-fg: #1747B0;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 10px 28px -12px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .04);
  --shadow-lg: 0 28px 64px -24px rgba(16, 24, 40, .34);
  --scrim: rgba(14, 23, 38, .5);

  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300;
  --chart-line: #1F6FEB;
  --chart-grid: #E9EDF4;
  --chart-axis: #CDD6E3;
  --chart-label: #667286;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}