/* ==========================================================================
   Design tokens — one source of truth for colour, depth, motion and rhythm.
   Light and dark are both first-class; nothing hardcodes a hex outside this file.
   ========================================================================== */

:root {
  /* --- brand -------------------------------------------------------------- */
  --blue-50:  #EAF3FF;  --blue-100: #D3E6FF;  --blue-300: #64AAFF;
  --blue:     #007AFF;  --blue-600: #0069DB;  --blue-700: #0055B3;

  --purple-50: #F5ECFD; --purple-100: #EBDCFB; --purple-300: #C88AEE;
  --purple:    #AF52DE; --purple-600: #9A3FC7; --purple-700: #7E2FA6;

  --red:    #FF3B30;  --red-soft:    #FFE9E7;
  --green:  #34C759;  --green-soft:  #E4F8EA;
  --amber:  #FF9F0A;  --amber-soft:  #FFF2DE;
  --cyan:   #32ADE6;  --cyan-soft:   #E3F4FC;
  --indigo: #5856D6;  --indigo-soft: #EAEAFB;
  --teal:   #30B0C7;  --teal-soft:   #E1F5F8;
  --pink:   #FF2D55;
  --gray-hue: #8E8E93; --gray-soft: #F0F0F2;

  /* --- neutrals (light) --------------------------------------------------- */
  --bg:            #F2F2F7;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFD;
  --surface-3:     #F5F5F7;
  --surface-hover: rgba(0, 0, 0, 0.035);
  --surface-press: rgba(0, 0, 0, 0.06);

  --text:      #1D1D1F;
  --text-2:    #55555C;
  --text-3:    #86868B;
  --text-4:    #A9A9AE;
  --on-accent: #FFFFFF;

  --separator:      rgba(0, 0, 0, 0.075);
  --separator-firm: rgba(0, 0, 0, 0.13);
  --hairline: 0.5px;

  --accent:      var(--blue);
  --accent-hover:var(--blue-600);
  --accent-soft: var(--blue-50);
  --accent-2:    var(--purple);
  --accent-2-soft: var(--purple-50);

  /* --- materials (vibrancy) ---------------------------------------------- */
  --material-thin:  rgba(255, 255, 255, 0.66);
  --material:       rgba(255, 255, 255, 0.78);
  --material-thick: rgba(250, 250, 252, 0.92);
  --blur: saturate(180%) blur(20px);

  /* --- depth -------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.07), 0 20px 50px rgba(0, 0, 0, 0.11);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.10), 0 36px 90px rgba(0, 0, 0, 0.18);
  --shadow-accent: 0 4px 14px rgba(0, 122, 255, 0.28);
  --ring: 0 0 0 4px rgba(0, 122, 255, 0.16);

  /* --- geometry ----------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 12px;  --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 26px; --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  --sidebar-w: 226px;      /* expanded, on hover/focus */
  --sidebar-rail: 56px;    /* resting width — icons only */
  --topbar-h: 56px;
  --content-max: 1180px;

  /* --- type --------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
               "JetBrains Mono", Menlo, monospace;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 27px; --fs-3xl: 34px; --fs-4xl: 44px;

  --lh-tight: 1.22; --lh: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.04em;

  /* --- motion ------------------------------------------------------------- */
  /* The signature Apple deceleration curve — fast out of the gate, long settle. */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --t-instant: 100ms;
  --t-fast:    170ms;
  --t:         280ms;
  --t-slow:    440ms;
  --t-lazy:    650ms;

  color-scheme: light;
}

/* ==========================================================================
   Dark — the default follows the OS; [data-theme] wins in either direction.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #0A84FF; --blue-600: #409CFF; --blue-700: #63B0FF;
    --purple: #BF5AF2; --purple-600: #D08BF5;
    --red: #FF453A; --green: #30D158; --amber: #FF9F0A;
    --cyan: #64D2FF; --indigo: #7D7AFF; --teal: #40C8E0;

    --blue-50: rgba(10, 132, 255, 0.16);
    --purple-50: rgba(191, 90, 242, 0.16);
    --red-soft: rgba(255, 69, 58, 0.16);
    --green-soft: rgba(48, 209, 88, 0.16);
    --amber-soft: rgba(255, 159, 10, 0.16);
    --cyan-soft: rgba(100, 210, 255, 0.16);
    --indigo-soft: rgba(125, 122, 255, 0.16);
    --teal-soft: rgba(64, 200, 224, 0.16);
    --gray-soft: rgba(142, 142, 147, 0.18);

    --bg:            #000000;
    --bg-elevated:   #1C1C1E;
    --surface:       #1C1C1E;
    --surface-2:     #232325;
    --surface-3:     #2C2C2E;
    --surface-hover: rgba(255, 255, 255, 0.055);
    --surface-press: rgba(255, 255, 255, 0.09);

    --text:   #F5F5F7;
    --text-2: #C7C7CC;
    --text-3: #98989D;
    --text-4: #6E6E73;

    --separator:      rgba(255, 255, 255, 0.09);
    --separator-firm: rgba(255, 255, 255, 0.16);

    --accent-soft: var(--blue-50);
    --accent-2-soft: var(--purple-50);

    --material-thin:  rgba(30, 30, 32, 0.62);
    --material:       rgba(28, 28, 30, 0.76);
    --material-thick: rgba(24, 24, 26, 0.92);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.55), 0 24px 60px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.6), 0 40px 100px rgba(0, 0, 0, 0.65);
    --shadow-accent: 0 4px 16px rgba(10, 132, 255, 0.4);
    --ring: 0 0 0 4px rgba(10, 132, 255, 0.26);

    color-scheme: dark;
  }
}

/* Explicit override — the in-app theme toggle stamps this on <html>. */
:root[data-theme="dark"] {
  --blue: #0A84FF; --blue-600: #409CFF; --blue-700: #63B0FF;
  --purple: #BF5AF2; --purple-600: #D08BF5;
  --red: #FF453A; --green: #30D158; --amber: #FF9F0A;
  --cyan: #64D2FF; --indigo: #7D7AFF; --teal: #40C8E0;

  --blue-50: rgba(10, 132, 255, 0.16);
  --purple-50: rgba(191, 90, 242, 0.16);
  --red-soft: rgba(255, 69, 58, 0.16);
  --green-soft: rgba(48, 209, 88, 0.16);
  --amber-soft: rgba(255, 159, 10, 0.16);
  --cyan-soft: rgba(100, 210, 255, 0.16);
  --indigo-soft: rgba(125, 122, 255, 0.16);
  --teal-soft: rgba(64, 200, 224, 0.16);
  --gray-soft: rgba(142, 142, 147, 0.18);

  --bg: #000000;
  --bg-elevated: #1C1C1E;
  --surface: #1C1C1E;
  --surface-2: #232325;
  --surface-3: #2C2C2E;
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-press: rgba(255, 255, 255, 0.09);

  --text: #F5F5F7; --text-2: #C7C7CC; --text-3: #98989D; --text-4: #6E6E73;
  --separator: rgba(255, 255, 255, 0.09);
  --separator-firm: rgba(255, 255, 255, 0.16);

  --accent-soft: var(--blue-50);
  --accent-2-soft: var(--purple-50);

  --material-thin: rgba(30, 30, 32, 0.62);
  --material: rgba(28, 28, 30, 0.76);
  --material-thick: rgba(24, 24, 26, 0.92);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.55), 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.6), 0 40px 100px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 4px 16px rgba(10, 132, 255, 0.4);
  --ring: 0 0 0 4px rgba(10, 132, 255, 0.26);

  color-scheme: dark;
}

/* Stage hues, resolved from the palette above so views never pick colours. */
:root {
  --hue-gray: var(--gray-hue);   --hue-gray-soft: var(--gray-soft);
  --hue-blue: var(--blue);       --hue-blue-soft: var(--blue-50);
  --hue-cyan: var(--cyan);       --hue-cyan-soft: var(--cyan-soft);
  --hue-indigo: var(--indigo);   --hue-indigo-soft: var(--indigo-soft);
  --hue-purple: var(--purple);   --hue-purple-soft: var(--purple-50);
  --hue-amber: var(--amber);     --hue-amber-soft: var(--amber-soft);
  --hue-green: var(--green);     --hue-green-soft: var(--green-soft);
  --hue-teal: var(--teal);       --hue-teal-soft: var(--teal-soft);
  --hue-red: var(--red);         --hue-red-soft: var(--red-soft);
}