/* ==========================================================================
   TrafficSEO design system — tokens
   "Paper editorial", from the approved design canvas (23 Sep 2026):
   a warm paper ground, ink text, one deep-green accent, a display serif
   over a refined grotesk with mono figures. LIGHT-FIRST: the bare :root is
   the paper theme; dark mode is a selected warm-dark set from the same
   ramps, never an automatic inversion.
   Chart series hues keep the validated categorical palette; both modes pass
   the lightness band, chroma floor, adjacent-pair CVD separation,
   normal-vision floor and 3:1 contrast checks against their own surface.
   Fonts are stacks: the named Google faces load if installed on the
   machine (or if woff2 files are later dropped into public/fonts/ with
   @font-face rules); otherwise each stack falls back to a matching system
   face, so the app never calls out to a font CDN.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- type ------------------------------------------------------------- */
  --font-display:
    Fraunces, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman",
    serif;
  --font-sans:
    "Instrument Sans", "Avenir Next", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:
    "Spline Sans Mono", "JetBrains Mono", "SF Mono", ui-monospace,
    SFMono-Regular, Menlo, monospace;

  --text-3xs: 0.625rem;   /* 10px — micro labels */
  --text-2xs: 0.6875rem;  /* 11px — kickers, table meta */
  --text-xs: 0.75rem;     /* 12px — small UI */
  --text-sm: 0.8125rem;   /* 13px — dense UI, table cells */
  --text-base: 0.875rem;  /* 14px — body */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px — card titles */
  --text-xl: 1.375rem;    /* 22px — section titles */
  --text-2xl: 1.75rem;    /* 28px — page titles */
  --text-3xl: 2.25rem;    /* 36px — hero */
  --text-metric: 2rem;    /* 32px — metric values */
  --text-metric-lg: 2.75rem;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-kicker: 0.12em;
  --tracking-tight: -0.012em;
  --tracking-tighter: -0.022em;

  /* --- space (4px base) -------------------------------------------------- */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* --- radius ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* --- layout ------------------------------------------------------------ */
  /* Phase 2: 248px/56px of chrome for a 14-link nav and a breadcrumb was more
     than the content needed. Content cap drops from 1520px so prose lines stay
     readable at wide window sizes. */
  --sidebar-w: 220px;
  --header-h: 48px;
  --content-max: 1360px;

  /* --- motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 380ms;

  /* ====================== LIGHT (default): warm paper ==================== */

  /* surfaces — paper ground, white cards */
  --canvas: #F6F4EE;
  --surface-1: #FBFAF6;        /* app chrome, sidebar */
  --surface-2: #FFFFFF;        /* cards — the chart surface */
  --surface-3: #F4F1E9;        /* raised: inputs, hovers */
  --surface-4: #FFFFFF;        /* highest: menus, tooltips */
  --surface-inset: #F0EDE4;    /* wells, code, tracks */

  /* ink — warm near-black, stepped for AA at every size used */
  --ink-1: #191713;            /* primary text */
  --ink-2: #454034;            /* secondary */
  --ink-3: #5C5749;            /* muted — 6.6:1 on white */
  --ink-4: #6E6858;            /* faint — 4.9:1, the floor for body text */

  /* lines — warm hairlines */
  --line-1: #E7E2D6;           /* default border */
  --line-2: #D8D2C2;           /* stronger border */
  --line-3: #C2BAA6;           /* hover border */

  /* brand — the deep green: toward Rank #1 */
  --brand: #1F7A4D;
  --brand-hover: #1B6A43;
  --brand-press: #175E3B;
  --brand-ink: #FFFFFF;        /* text on brand fill (5.1:1) */
  --brand-soft: #1F7A4D14;     /* tinted fill */
  --brand-softer: #1F7A4D0A;
  --brand-line: #1F7A4D3D;

  /* signal — live/streaming accent, a deep teal beside the green */
  --signal: #0E6E76;
  --signal-soft: #0E6E7614;

  /* status — labelled, never color alone */
  --good: #1F7A4D;
  --good-soft: #1F7A4D14;
  --good-line: #1F7A4D3D;
  --warn: #9A610E;
  --warn-soft: #9A610E14;
  --warn-line: #9A610E3D;
  --serious: #B4531E;
  --serious-soft: #B4531E14;
  --danger: #B93A32;
  --danger-soft: #B93A3214;
  --danger-line: #B93A323D;
  --neutral-soft: #5C574912;

  /* chart series — the validated categorical palette (light steps) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* sequential ramp (blue): light -> dark */
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #6da7ec;
  --seq-4: #3987e5;
  --seq-5: #256abf;
  --seq-6: #184f95;

  /* chart furniture */
  --grid: #1917130F;
  --axis-ink: var(--ink-3);
  --plot-surface: var(--surface-2);

  /* elevation — warm, quiet */
  --shadow-1: 0 1px 2px #2B241708;
  --shadow-2: 0 4px 14px -2px #2B241714, 0 2px 4px -2px #2B24170A;
  --shadow-3: 0 18px 44px -12px #2B241726, 0 6px 14px -6px #2B241714;
  --glow-brand: 0 0 0 1px #1F7A4D29, 0 8px 24px -10px #1F7A4D5C;
  --glow-signal: 0 0 16px -4px #0E6E7640;

  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);

  /* decorative */
  --aurora-1: #1F7A4D10;
  --aurora-2: #0E6E760C;
  --hairline: #1917130A;
}

/* ====================== DARK: warm ink =================================== */
/* Selected steps from the same warm ramps — validated against the dark
   surface, never an automatic flip. */

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

    --canvas: #14120D;
    --surface-1: #191712;
    --surface-2: #1E1B15;
    --surface-3: #26221A;
    --surface-4: #2C2820;
    --surface-inset: #100E0A;

    --ink-1: #F0ECE1;
    --ink-2: #C9C2B0;
    --ink-3: #A9A18C;
    --ink-4: #918A76;

    --line-1: #2C2820;
    --line-2: #3A3529;
    --line-3: #4C4636;

    --brand: #3FA873;
    --brand-hover: #52B683;
    --brand-press: #338F60;
    --brand-ink: #10130E;
    --brand-soft: #3FA8731F;
    --brand-softer: #3FA87312;
    --brand-line: #3FA8734D;

    --signal: #3FB9C4;
    --signal-soft: #3FB9C41F;

    --good: #3FA873;
    --good-soft: #3FA8731F;
    --good-line: #3FA8734D;
    --warn: #E0A33E;
    --warn-soft: #E0A33E1F;
    --warn-line: #E0A33E4D;
    --serious: #E8845A;
    --serious-soft: #E8845A1F;
    --danger: #E4756B;
    --danger-soft: #E4756B1F;
    --danger-line: #E4756B4D;
    --neutral-soft: #C9C2B01A;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --seq-1: #cde2fb;
    --seq-2: #9ec5f4;
    --seq-3: #6da7ec;
    --seq-4: #3987e5;
    --seq-5: #256abf;
    --seq-6: #184f95;

    --grid: #FFFFFF0F;
    --plot-surface: var(--surface-2);

    --shadow-1: 0 1px 2px #00000059;
    --shadow-2: 0 4px 14px -2px #0000006B, 0 2px 4px -2px #00000047;
    --shadow-3: 0 18px 44px -12px #000000A6, 0 6px 14px -6px #0000007A;
    --glow-brand: 0 0 0 1px #3FA8733D, 0 8px 28px -8px #3FA8734D;
    --glow-signal: 0 0 16px -2px #3FB9C466;

    --aurora-1: #3FA87317;
    --aurora-2: #3FB9C40F;
    --hairline: #FFFFFF0A;
  }
}

/* Manual theme stamps win over the OS setting, both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #14120D;
  --surface-1: #191712;
  --surface-2: #1E1B15;
  --surface-3: #26221A;
  --surface-4: #2C2820;
  --surface-inset: #100E0A;

  --ink-1: #F0ECE1;
  --ink-2: #C9C2B0;
  --ink-3: #A9A18C;
  --ink-4: #918A76;

  --line-1: #2C2820;
  --line-2: #3A3529;
  --line-3: #4C4636;

  --brand: #3FA873;
  --brand-hover: #52B683;
  --brand-press: #338F60;
  --brand-ink: #10130E;
  --brand-soft: #3FA8731F;
  --brand-softer: #3FA87312;
  --brand-line: #3FA8734D;

  --signal: #3FB9C4;
  --signal-soft: #3FB9C41F;

  --good: #3FA873;
  --good-soft: #3FA8731F;
  --good-line: #3FA8734D;
  --warn: #E0A33E;
  --warn-soft: #E0A33E1F;
  --warn-line: #E0A33E4D;
  --serious: #E8845A;
  --serious-soft: #E8845A1F;
  --danger: #E4756B;
  --danger-soft: #E4756B1F;
  --danger-line: #E4756B4D;
  --neutral-soft: #C9C2B01A;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #6da7ec;
  --seq-4: #3987e5;
  --seq-5: #256abf;
  --seq-6: #184f95;

  --grid: #FFFFFF0F;
  --plot-surface: var(--surface-2);

  --shadow-1: 0 1px 2px #00000059;
  --shadow-2: 0 4px 14px -2px #0000006B, 0 2px 4px -2px #00000047;
  --shadow-3: 0 18px 44px -12px #000000A6, 0 6px 14px -6px #0000007A;
  --glow-brand: 0 0 0 1px #3FA8733D, 0 8px 28px -8px #3FA8734D;
  --glow-signal: 0 0 16px -2px #3FB9C466;

  --aurora-1: #3FA87317;
  --aurora-2: #3FB9C40F;
  --hairline: #FFFFFF0A;
}

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