/* MotoMetricsEV brand tokens — v1.0 (2026-10-03)
   Source of truth for color, type, spacing, radius, elevation and motion.
   Import once, before site.css. Components reference tokens only, never raw hex. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/brand/fonts/PlusJakartaSans-latin-var.woff2") format("woff2-variations"),
       url("/static/brand/fonts/PlusJakartaSans-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --brand-ink: #0B1220;          /* logo tile, primary text, primary buttons */
  --brand-blue: #2563EB;         /* the range band; accent; links */
  --brand-blue-strong: #1D4ED8;  /* hover, text on soft blue */
  --brand-blue-soft: #EFF4FF;    /* tints, pills, focus halo */
  --brand-blue-on-dark: #93C5FD; /* the band and "EV" on dark grounds */
  --brand-tile-dark: #1E293B;    /* logo tile on dark grounds */

  /* Neutrals */
  --ink: var(--brand-ink);
  --ink-2: #334155;
  --muted: #5B6B80;              /* 5.4:1 on white, 5.1:1 on surface-alt */
  --line: #E5E7EB;
  --line-strong: #CBD5E1;
  --surface: #FFFFFF;
  --surface-alt: #F6F8FB;
  --surface-dark: var(--brand-ink);
  --paper: #FFFFFF; /* lockup stroke stays white on the tile in both themes */
  --panel: #FFFFFF; /* cards, chips, and fields; flips in dark mode */
  --on-dark-heading: #FFFFFF;
  --on-dark-body: #CBD5E1;

  /* Roles */
  --accent: var(--brand-blue);
  --accent-strong: var(--brand-blue-strong);
  --accent-soft: var(--brand-blue-soft);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand-blue);

  /* The band motif (logo idea, reused in data) */
  --band-model: #D3DCE8;                       /* "normal for similar cars" on light */
  --band-car: color-mix(in srgb, var(--brand-blue) 32%, transparent);
  --band-measured: color-mix(in srgb, var(--grade-a) 35%, transparent);
  --band-dot: var(--brand-ink);
  --band-dot-ring: var(--surface);

  /* Data: grades (data only, never decoration) */
  --grade-a: #10B981; --grade-b: #84CC16; --grade-c: #F59E0B; --grade-d: #F97316; --grade-f: #EF4444;

  /* Data: evidence tiers */
  --tier-est-bg: #F1F5F9;  --tier-est-fg: #334155;
  --tier-con-bg: #EFF4FF;  --tier-con-fg: #1D4ED8;
  --tier-mea-bg: #ECFDF5;  --tier-mea-fg: #047857;

  /* Status */
  --info-bg: #EFF4FF; --info-fg: #1D4ED8;
  --warn-bg: #FFFBEB; --warn-fg: #92400E;
  --danger-bg: #FEF2F2; --danger-fg: #B91C1C;
  --success-bg: #ECFDF5; --success-fg: #047857;

  /* Vehicle illustrations */
  --veh-body: #FFFFFF; --veh-stroke: #475569; --veh-glass: #CBD5E1;
  --veh-tire: #334155; --veh-hub: #E2E8F0; --veh-ground: #CBD5E1;
  --pack-shell: #94A3B8; --pack-empty: #E2E8F0;

  /* Type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(36px, 4.4vw, 52px);
  --fs-h1: clamp(32px, 4vw, 44px);
  --fs-h2: clamp(26px, 3vw, 36px);
  --fs-h3: 20px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 13px;
  --fs-stat: 28px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.6;
  --tracking-display: -0.02em; --tracking-eyebrow: 0.08em;

  /* Space (4-pt scale) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px;
  --section-y: clamp(40px, 5vw, 64px);
  --section-head-gap: 24px;
  --stack-gap: 16px;
  --container: 1120px; --gutter: 16px;

  /* Shape */
  --radius-sm: 10px;   /* inputs, small cards */
  --radius: 14px;      /* cards — same 14/64 ratio as the logo tile */
  --radius-lg: 20px;   /* hero cards, feature panels */
  --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.08);
  --shadow-2: 0 10px 30px rgba(11,18,32,.10);

  /* Motion */
  --dur-fast: 150ms; --dur-base: 200ms; --dur-fill: 400ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #F1F5F9; --ink-2: #CBD5E1; --muted: #B6C2D2;
    --line: #334155; --line-strong: #64748B;
    --surface: #0B1220; --surface-alt: #111A2E; --surface-dark: #060B16;
    --panel: #162033;
    --accent: var(--brand-blue-on-dark); --accent-strong: #BFDBFE; --accent-soft: #172554;
    --band-model: #334155; --band-car: color-mix(in srgb, var(--brand-blue-on-dark) 40%, transparent);
    --band-dot: #F1F5F9; --band-dot-ring: var(--surface);
    --tier-est-bg: #1E293B; --tier-est-fg: #CBD5E1;
    --tier-con-bg: #172554; --tier-con-fg: #BFDBFE;
    --tier-mea-bg: #052E26; --tier-mea-fg: #6EE7B7;
    --info-bg: #172554; --info-fg: #BFDBFE; --warn-bg: #2A1A05; --warn-fg: #FCD34D;
    --danger-bg: #2A0B0B; --danger-fg: #FCA5A5; --success-bg: #052E26; --success-fg: #6EE7B7;
    --veh-body: #111A2E; --veh-stroke: #94A3B8; --veh-glass: #334155;
    --veh-tire: #64748B; --veh-hub: #1E293B; --veh-ground: #334155;
    --pack-shell: #64748B; --pack-empty: #1E293B;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F1F5F9; --ink-2: #CBD5E1; --muted: #B6C2D2;
  --line: #334155; --line-strong: #64748B;
  --surface: #0B1220; --surface-alt: #111A2E; --surface-dark: #060B16;
  --panel: #162033;
  --accent: var(--brand-blue-on-dark); --accent-strong: #BFDBFE; --accent-soft: #172554;
  --band-model: #334155; --band-car: color-mix(in srgb, var(--brand-blue-on-dark) 40%, transparent);
  --band-dot: #F1F5F9; --band-dot-ring: var(--surface);
  --tier-est-bg: #1E293B; --tier-est-fg: #CBD5E1;
  --tier-con-bg: #172554; --tier-con-fg: #BFDBFE;
  --tier-mea-bg: #052E26; --tier-mea-fg: #6EE7B7;
  --info-bg: #172554; --info-fg: #BFDBFE; --warn-bg: #2A1A05; --warn-fg: #FCD34D;
  --danger-bg: #2A0B0B; --danger-fg: #FCA5A5; --success-bg: #052E26; --success-fg: #6EE7B7;
  --veh-body: #111A2E; --veh-stroke: #94A3B8; --veh-glass: #334155;
  --veh-tire: #64748B; --veh-hub: #1E293B; --veh-ground: #334155;
  --pack-shell: #64748B; --pack-empty: #1E293B;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-fill: 0ms; }
}