/* ==========================================================================
   Anderson Drive Club — Design Tokens
   Single source of truth for color, type, space, radius, elevation, motion.
   Two selected themes (light + dark). Dark is not a filter-invert of light.

   Brand:  Royal Blue  #2563EB   (primary)
           Deep Navy   #0F172A   (secondary — surfaces, inverted blocks)
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand ------------------------------------------------------------
     Royal blue is CHROME only — logo, primary action, active nav, links.
     It is never a data-series color; the series ramp keeps blue in slot 7. */
  --brand:            #2563EB;
  --brand-hover:      #1D4ED8;
  --brand-strong:     #1D4ED8;   /* brand as TEXT / icons on light surfaces */
  --brand-soft:       #EFF4FF;
  --brand-soft-2:     #DCE8FF;
  --brand-ink:        #FFFFFF;   /* text that sits ON brand fill */
  --brand-line:       rgba(37, 99, 235, .26);
  --brand-glow:       rgba(37, 99, 235, .30);

  /* ---- Surfaces (deep-navy family) -------------------------------------- */
  --plane:            #F1F4F9;   /* page background */
  --surface:          #FFFFFF;   /* cards, panels, chart surface */
  --surface-2:        #F7F9FC;   /* inset / table stripe */
  --surface-3:        #EBF0F7;   /* wells, tracks */
  --surface-inv:      #0F172A;   /* inverted blocks on light pages */
  --photo-tile:       #FFFFFF;   /* behind studio car photography — white in BOTH
                                    themes so the cut-out's own sweep is seamless */
  --overlay:          rgba(15, 23, 42, .52);

  /* ---- Ink -------------------------------------------------------------- */
  --ink:              #0F172A;
  --ink-2:            #475569;
  --ink-3:            #64748B;
  --ink-muted:        #94A3B8;
  --ink-on-brand:     #FFFFFF;
  --ink-inv:          #F1F4F9;

  /* ---- Lines ------------------------------------------------------------ */
  --line:             #E2E8F0;
  --line-soft:        #EDF1F7;
  --line-strong:      #CBD5E1;
  --ring:             rgba(37, 99, 235, .34);

  /* ---- Status (reserved — never reused as a series color) --------------- */
  --good:             #0CA30C;
  --good-ink:         #06710A;
  --good-soft:        #E7F6E7;
  --warning:          #FAB219;
  --warning-ink:      #8A5D00;
  --warning-soft:     #FEF4E0;
  --serious:          #EC835A;
  --serious-ink:      #9C4A22;
  --serious-soft:     #FDEDE5;
  --critical:         #D03B3B;
  --critical-ink:     #A72222;
  --critical-soft:    #FBE9E9;
  --info:             #2563EB;   /* aligned to brand — informational, not a series */
  --info-ink:         #1D4ED8;
  --info-soft:        #EFF4FF;

  /* ---- Data series ------------------------------------------------------
     Validated order for these surfaces. Adjacent CVD ΔE 9.2 light / 9.4 dark;
     adjacent normal-vision ΔE 19.6 / 19.3; all inside the lightness band.
     Blue sits at slot 7 so a chart mark is never mistaken for brand chrome. */
  --s1:  #1BAF7A;   /* aqua    */
  --s2:  #EB6834;   /* orange  */
  --s3:  #4A3AA7;   /* violet  */
  --s4:  #EDA100;   /* yellow  */
  --s5:  #E87BA4;   /* magenta */
  --s6:  #008300;   /* green   */
  --s7:  #2A78D6;   /* blue    */
  --s8:  #E34948;   /* red     */

  /* ---- Chart chrome ----------------------------------------------------- */
  --grid:             #E8EDF4;
  --axis:             #CBD5E1;
  --chart-ink:        #64748B;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --sh-2: 0 2px 4px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .08);
  --sh-3: 0 8px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  --sh-4: 0 24px 60px rgba(15, 23, 42, .20), 0 4px 12px rgba(15, 23, 42, .08);
  --sh-brand: 0 6px 20px rgba(37, 99, 235, .32);

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* ---- Space (4px base) ------------------------------------------------- */
  --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;  --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;

  /* ---- Type ------------------------------------------------------------- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  13px;
  --t-md:  14px;
  --t-lg:  16px;
  --t-xl:  19px;
  --t-2xl: 24px;
  --t-3xl: 31px;
  --t-4xl: 40px;
  --t-5xl: 54px;
  --t-6xl: 72px;

  /* ---- Layout ----------------------------------------------------------- */
  --nav-w: 264px;
  --nav-w-collapsed: 76px;
  --topbar-h: 64px;
  --shell-max: 1560px;
  --site-max: 1240px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
}

/* ==========================================================================
   Dark theme — separately selected steps, not an inversion.
   Declared under both the OS media query and the explicit toggle scope so
   the viewer's choice wins in either direction.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --brand:          #2563EB;
    --brand-hover:    #3B82F6;
    --brand-strong:   #60A5FA;   /* brand as TEXT on dark — 6.5:1 */
    --brand-soft:     #14264A;
    --brand-soft-2:   #1B3364;
    --brand-ink:      #FFFFFF;
    --brand-line:     rgba(96, 165, 250, .30);
    --brand-glow:     rgba(59, 130, 246, .26);

    --plane:          #080D18;
    --surface:        #141E33;
    --surface-2:      #1B2740;
    --surface-3:      #24324F;
    --surface-inv:    #F1F4F9;
    --photo-tile:     #FFFFFF;
    --overlay:        rgba(3, 6, 14, .68);

    --ink:            #E9EEF7;
    --ink-2:          #A6B4CC;
    --ink-3:          #7F8FA9;
    --ink-muted:      #64748B;
    --ink-inv:        #0F172A;

    --line:           #24314C;
    --line-soft:      #1C2740;
    --line-strong:    #33425F;
    --ring:           rgba(96, 165, 250, .40);

    --good-soft:      #0D2A12;
    --warning-soft:   #2C2209;
    --serious-soft:   #2E1C13;
    --critical-soft:  #2E1414;
    --info-soft:      #14264A;
    --good-ink:       #4FC64F;
    --warning-ink:    #F1BE4B;
    --serious-ink:    #F0A282;
    --critical-ink:   #F07A7A;
    --info-ink:       #60A5FA;

    --s1: #199E70;  --s2: #D95926;  --s3: #9085E9;  --s4: #C98500;
    --s5: #D55181;  --s6: #008300;  --s7: #3987E5;  --s8: #E66767;

    --grid:      #212E48;
    --axis:      #33425F;
    --chart-ink: #7F8FA9;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .44);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .44), 0 8px 20px rgba(0, 0, 0, .32);
    --sh-3: 0 10px 30px rgba(0, 0, 0, .52);
    --sh-4: 0 28px 70px rgba(0, 0, 0, .64);
    --sh-brand: 0 6px 22px rgba(37, 99, 235, .40);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand:          #2563EB;
  --brand-hover:    #3B82F6;
  --brand-strong:   #60A5FA;
  --brand-soft:     #14264A;
  --brand-soft-2:   #1B3364;
  --brand-ink:      #FFFFFF;
  --brand-line:     rgba(96, 165, 250, .30);
  --brand-glow:     rgba(59, 130, 246, .26);

  --plane:          #080D18;
  --surface:        #141E33;
  --surface-2:      #1B2740;
  --surface-3:      #24324F;
  --surface-inv:    #F1F4F9;
  --photo-tile:     #EDF1F7;
  --overlay:        rgba(3, 6, 14, .68);

  --ink:            #E9EEF7;
  --ink-2:          #A6B4CC;
  --ink-3:          #7F8FA9;
  --ink-muted:      #64748B;
  --ink-inv:        #0F172A;

  --line:           #24314C;
  --line-soft:      #1C2740;
  --line-strong:    #33425F;
  --ring:           rgba(96, 165, 250, .40);

  --good-soft:      #0D2A12;
  --warning-soft:   #2C2209;
  --serious-soft:   #2E1C13;
  --critical-soft:  #2E1414;
  --info-soft:      #14264A;
  --good-ink:       #4FC64F;
  --warning-ink:    #F1BE4B;
  --serious-ink:    #F0A282;
  --critical-ink:   #F07A7A;
  --info-ink:       #60A5FA;

  --s1: #199E70;  --s2: #D95926;  --s3: #9085E9;  --s4: #C98500;
  --s5: #D55181;  --s6: #008300;  --s7: #3987E5;  --s8: #E66767;

  --grid:      #212E48;
  --axis:      #33425F;
  --chart-ink: #7F8FA9;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .44);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .44), 0 8px 20px rgba(0, 0, 0, .32);
  --sh-3: 0 10px 30px rgba(0, 0, 0, .52);
  --sh-4: 0 28px 70px rgba(0, 0, 0, .64);
  --sh-brand: 0 6px 22px rgba(37, 99, 235, .40);
}