/* Self-hosted Geist (SIL OFL 1.1 — see assets/fonts/OFL.txt). Variable woff2,
   upright only — ethos §4 prefers weight changes over italics. */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Ford Antenna (proprietary — licensed Ford brand face, dealer use). The MAX
   brand display face (sheet labels it "Ford Antique"; the licensable face is
   Ford Antenna). MAX (= Dark) wordmark + hero numerals only; tables stay Geist. */
@font-face { font-family: "FordAntenna"; src: url("../assets/fonts/FordAntenna-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FordAntenna Cond"; src: url("../assets/fonts/FordAntennaCond-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FordAntenna Cond"; src: url("../assets/fonts/FordAntennaCond-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "FordAntenna Comp"; src: url("../assets/fonts/FordAntennaComp-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* KG MAX design-bible faces (parity with design-bible/ ui_kits): Saira (display),
   Hanken Grotesk (text/UI), JetBrains Mono (data/mono), Michroma (the MAX wordmark).
   All SIL OFL 1.1 (see assets/fonts/OFL.txt). Variable woff2 (Michroma static 400),
   upright only. Geist + Ford Antenna @font-face kept above: still consumed by the
   crm/meeting.js print sheet (separate pass — design-bible-migration/SKIPPED.md). */
@font-face {
  font-family: "Saira";
  src: url("../assets/fonts/Saira-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("../assets/fonts/Michroma-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ============================================================================
   THEMES (2026-06-04): Light · Dark · Auto.  **Dark IS the MAX "Performance
   Layer"** (deep black/graphite/silver). Auto follows the OS (light or MAX-dark).
   Two accents: --accent (informational BLUE — pace/pivot/links/data cadence) and
   --brand (Energy Red — only brand chrome: active nav, CTAs, the X). Red
   never colors neutral numbers; it's reserved for genuinely-bad semantics (--red).
   ============================================================================ */
:root {
  /* Shared height for header-level clickable controls (store selector, stock
     pills, pace toggle, …) — uniform so the eye/muscle memory lands on the
     same band across the chrome. ~20% shorter than the old 32–36px pills.
     Drilldown/table controls are intentionally exempt. */
  --ctl-h: 28px;
  /* Design-bible type: Saira (display) · Hanken Grotesk (text) · JetBrains Mono
     (data) · Michroma (the MAX wordmark). */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Saira", var(--font-sans);
  --font-brand: "Saira", var(--font-sans);
  --font-hero: "Saira", var(--font-sans);
  --font-wordmark: "Michroma", "Saira", var(--font-sans);
  --font-label: var(--font-sans);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  /* Radii — design-bible scale (rounder: control 12, card 16). */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* Type scale (2026-06-05 UI refresh): a deliberate set that collapses the ~25
     ad-hoc font sizes drifting across the stylesheets. Adopt incrementally —
     existing px sizes still work; map onto these as files are touched. */
  --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px;
  --fs-md: 15px;    --fs-lg: 18px;   --fs-xl: 22px;    --fs-2xl: 30px;
  --fw-medium: 500; --fw-semi: 600;  --fw-bold: 700;
  --sh-1: 0 1px 3px rgba(20, 20, 30, 0.08);
  --sh-2: 0 4px 14px rgba(20, 20, 30, 0.10);
  --sh-3: 0 8px 24px rgba(20, 20, 30, 0.12);
  --sh-4: 0 16px 48px rgba(20, 20, 30, 0.18);

  /* Hover-motion standard — THE timing for every interactive hover (the original
     .crm-card feel). One token so nothing drifts slower; see STYLE.md §9 +
     styles/interactions.css. Snappy, no overshoot. */
  --hover-dur: 0.15s;
  --hover-ease: ease;

  /* ============================================================================
     DESIGN-BIBLE TOKENS (design-bible/tokens/*). Brand layer adopted UI-wide:
     bible motion + easings, Energy-Red flares/focus, gradients, type tracking +
     leading. Surfaces + the functional blue --accent are kept
     (operational data cadence); Energy Red (--brand) is the brand accent. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --tracking-tight: -0.015em; --tracking-wide: 0.04em; --tracking-eyebrow: 0.2em;
  /* Energy glow — LIGHT default: a TIGHT red elevation (the 24px neon halo reads
     muddy on white), paired with a 1px accent edge so the lift stays crisp. The
     dark/MAX blocks below re-override to the luminous halo. */
  --glow-red-sm: 0 1px 5px rgba(226, 46, 21, 0.30);
  --glow-red: 0 2px 10px rgba(226, 46, 21, 0.28), 0 0 0 1px rgba(226, 46, 21, 0.22);
  --glow-red-lg: 0 4px 18px rgba(226, 46, 21, 0.30), 0 0 0 1px rgba(226, 46, 21, 0.20);
  --glow-red-ring: 0 0 0 1px rgba(226, 46, 21, 0.55), 0 1px 8px rgba(226, 46, 21, 0.22);
  --ring-focus: 0 0 0 2px #ffffff, 0 0 0 4px rgba(226, 46, 21, 0.55);
  --gradient-energy: linear-gradient(90deg, #7A0D03 0%, #D21A0A 50%, #FF6A3D 100%);
  --gradient-energy-diag: linear-gradient(135deg, #D21A0A 0%, #FF6A3D 100%);
  --gradient-graphite: linear-gradient(180deg, #1F1F23 0%, #121214 100%);
  --gradient-ember: radial-gradient(120% 140% at 50% -10%, rgba(255,56,31,0.30) 0%, rgba(210,26,10,0.08) 34%, transparent 68%);
  /* Canvas ember v2 (2026-07-02) — the dark/MAX page-canvas glow, redesigned off the flag
     revert. Two fixed-px radials (not %-sized, so they don't smear at 2560 or blob at 390)
     anchored off-canvas at the top corners, feathering out well before mid-viewport. Deepest
     stop is --kg-red-700 (#7A0D03) at low alpha — reads as heat behind a blacked-out machine,
     not a red wash (Energy Red is never a background wash — bible rule). --gradient-ember
     itself is untouched (auth.css login canvas still uses the original single-radial wash). */
  --gradient-ember-v2:
    radial-gradient(900px 640px at -6% -14%, rgba(122,13,3,0.24) 0%, rgba(122,13,3,0.10) 40%, transparent 72%),
    radial-gradient(560px 420px at 106% 8%, rgba(255,106,61,0.05) 0%, transparent 60%);
  --canvas-glow: none;   /* page canvas bloom — none for light; the ember in dark/MAX (set per-theme below) */

  --max-deep-black: #0b0b0c; --max-graphite: #1a1a1d; --max-silver: #c7c7c8;
  --max-gunmetal: var(--max-graphite); --max-aluminum: var(--max-silver);
  --max-red: #ff381f;
  /* Brand accent — fixed Max Red (the Ford-paint accent picker was retired
     2026-07-02; MAX stays visually consistent, Light/Dark is the only choice).
     Everything "Max red" routes through this — chat surface, mark, MAX-dark
     brand chrome. The informational blue --accent is NOT affected. Kept as a
     token indirection so the ~15 var(--user-accent) call sites need no churn. */
  --user-accent: var(--max-red);
  /* Text color on --user-accent fills (bubble, CTAs). Always white now that the
     accent is fixed to Max Red. */
  --user-accent-text: #fff;
  --max-aluminum-grad: linear-gradient(180deg, #e4e5e7 0%, #9a9b9e 45%, #6e7074 100%);

  /* LIGHT chrome (default). */
  color-scheme: light;
  --bg: #f7f7f7;
  --panel: #ffffff;
  --panel-2: #ececec;
  --border: #d8dde3;
  --text: #1a1f26;
  --text-dim: #555c66;
  --text-muted: #8b929c;

  --accent: #0066b3;             /* informational blue — pace/pivot/links/data */
  /* MAX Overview pane re-scope target (build spec §C): the pane sits inside
     .chat-body, which scopes --accent to red for the chat product — Overview
     re-scopes its own --accent back to this blue data-cadence token. */
  --data-accent: #0066b3;
  --sort-desc: #d98a2b;          /* descending-sort header (amber) */
  --brand: var(--user-accent);   /* Energy Red brand chrome (bible — red in BOTH themes) */
  --green: #2d8a4e;
  --red: #d21a0a;                /* genuinely-bad only — Energy-Red 500 (2026-07 remap off legacy Race Red; 5.4:1 on panel, 5.0:1 on bg) */
  --orange: #d97706;
  --warn: #c9821a;               /* amber caution / data-quality (absorbs #c9a227, #d4a017, #ea580c one-offs) */
  --new: #14b8a6;
  --used: #d97706;
  --fctp: #8b5cf6;
  /* Transit status = light purple, deliberately distinct from recon (red) and
     a shade lighter than FCTP's violet so the two don't read the same. */
  --transit: #a78bfa;
  --prior: #6b7280;
  --total: #1a1f26;
  --store-buena-park: #2563eb;
  --store-carlsbad: #bf0a30;
  --store-redlands: #2d8a4e;
  --fin-new: var(--store-buena-park);
  --fin-used: var(--used);
  --fin-fni: var(--fctp);
  --fin-service: #4338ca;
  --fin-parts: var(--green);
  --fin-body: #475569;
  /* Sales Tracker team-row solid fill (reports.css .reports-mgr-tinted,
     screen-only — 2026-07-02) — how much black to color-mix into a manager's
     hue (one of the fin-new/fin-used/fin-fni/fin-service/fin-parts family,
     fin-body, or text-muted) so WHITE row text clears 4.5:1 (WCAG AA) on
     every hue. Verified worst-case per theme (light: text-muted 3.14:1 base
     -> needs 19% black; dark: fin-used 2.71:1 base -> needs 25% black) —
     this is the flat per-theme % with margin above both. */
  --mgr-fill-mix: 20%;
  --fin-kept: var(--green);
  --fin-burned: var(--warn);
  --fin-statement-bg: #f6f7f9;
  --fin-band-bg: #4a4f57;

  --row-tint: rgba(0, 0, 0, 0.04);
  --subheader-bg: rgba(0, 0, 0, 0.04);
  --accent-tint: rgba(0, 102, 179, 0.12);
  --brand-tint: color-mix(in srgb, var(--user-accent) 12%, transparent);
  --error-tint: rgba(210, 26, 10, 0.08);
  --hover-bg: #e0e5eb;
  --hover-border: #b8c0c8;
  --dot: rgba(20, 20, 45, 0.14);   /* canvas dot-field (light) — legacy strength; account/admin-plane canvases */
  /* Canvas grain (2026-07-03) — the dot-field readmitted as MATERIAL, not pattern:
     a much fainter dot on a tighter pitch, painted only near the top of the
     viewport (app.css fades it out by mid-screen) so it reads as machined texture
     caught in the header light, not dot-grid wallpaper. One formula for all
     themes; the per-theme --dot-grain carries the color. Neutral only — never red
     (Energy Red is never a background wash). */
  --dot-grain: rgba(20, 20, 45, 0.09);
  --canvas-texture: radial-gradient(var(--dot-grain) 1px, transparent 1.1px);
  /* Light-theme additions for bible feedback components (hairline ramp).
     Dark already defines --border-subtle/-strong. */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.20);
}

/* DARK = MAX "Performance Layer". Explicit ([data-theme="dark"]) or via Auto
   (system dark). --accent stays BLUE (data cadence); --brand is Energy Red
   (brand chrome only). [data-theme="max"] kept as a back-compat alias. */
:root[data-theme="dark"],
:root[data-theme="max"] {
  color-scheme: dark;
  --font-brand: "Saira", var(--font-sans);
  --font-hero: "Saira", var(--font-sans);
  --bg: var(--max-deep-black);
  --panel: var(--max-graphite);
  --panel-2: #222226;
  --border: rgba(255, 255, 255, 0.10);     /* bible glassy hairline (was #303034) */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: var(--max-aluminum);
  --text-dim: #a6a8ad;
  --text-muted: #92949a;
  --accent: #4d9fff;             /* bright informational blue on graphite */
  --data-accent: #4d9fff;        /* MAX Overview pane re-scope target (see :root) */
  --sort-desc: #e0a34a;          /* descending-sort header (amber) */
  --brand: var(--user-accent);   /* Energy Red — active nav / CTAs / brand */
  --green: #2fa85a;
  --red: #ff381f;                /* bad (90+ buckets, negative deltas) — Energy-Red base, = --brand (danger = brand per brandbook); 5.5:1 on --bg, 4.8:1 on --panel */
  --orange: #e0890f;
  --warn: #e0a83a;               /* amber caution / data-quality (MAX) */
  --used: #e0890f;
  --fctp: #9b75f0;
  --transit: #b9a3fb;
  --prior: #7a7d82;
  --total: var(--text);
  --store-buena-park: #3b82f6;
  --store-carlsbad: #e0344a;
  --store-redlands: #34b364;
  --fin-new: var(--store-buena-park);
  --fin-used: var(--used);
  --fin-fni: var(--fctp);
  --fin-service: #6670e8;
  --fin-parts: var(--green);
  --fin-body: #8b96a8;
  --mgr-fill-mix: 28%;   /* dark hues are brighter — see the light block's comment */
  --fin-kept: var(--green);
  --fin-burned: var(--warn);
  --fin-statement-bg: #f6f7f9;
  --fin-band-bg: #4a4f57;
  --row-tint: rgba(255, 255, 255, 0.03);
  --subheader-bg: rgba(255, 255, 255, 0.045);
  --accent-tint: rgba(77, 159, 255, 0.16);
  --brand-tint: color-mix(in srgb, var(--user-accent) 18%, transparent);
  --error-tint: rgba(255, 56, 31, 0.12);
  --hover-bg: #2a2a2a;
  --hover-border: #3a3a3a;
  --dot: rgba(255, 255, 255, 0.10);   /* canvas dot-field (MAX/dark) — legacy strength; account/admin-plane canvases */
  --dot-grain: rgba(255, 255, 255, 0.07);   /* canvas grain (MAX) — under the legacy 0.10 dot; texture, not pattern */
  --canvas-glow: var(--gradient-ember-v2);   /* MAX canvas = ember v2, corner heat behind the header (2026-07-02) */
  --sh-1: 0 1px 2px rgba(0,0,0,0.45);
  --sh-2: 0 2px 8px rgba(0,0,0,0.50);
  --sh-3: 0 8px 24px rgba(0,0,0,0.55);
  --sh-4: 0 18px 50px rgba(0,0,0,0.60);
  --edge-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
  /* Energy glow — MAX/dark: the luminous halo (overrides the light tight-shadow). */
  --glow-red-sm: 0 0 12px rgba(255, 59, 31, 0.45);
  --glow-red: 0 0 24px rgba(255, 59, 31, 0.45);
  --glow-red-lg: 0 0 48px rgba(255, 59, 31, 0.50);
  --glow-red-ring: 0 0 0 1px rgba(255, 59, 31, 0.55), 0 0 22px rgba(255, 59, 31, 0.35);
  --ring-focus: 0 0 0 3px rgba(255, 59, 31, 0.35);
}

/* AUTO (no cookie / 'auto') follows the OS: system-dark → MAX. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --font-brand: "Saira", var(--font-sans);
    --font-hero: "Saira", var(--font-sans);
    --bg: var(--max-deep-black);
    --panel: var(--max-graphite);
    --panel-2: #222226;
    --border: rgba(255, 255, 255, 0.10);     /* bible glassy hairline (was #303034) */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: var(--max-aluminum);
    --text-dim: #a6a8ad;
    --text-muted: #92949a;
    --accent: #4d9fff;
    --data-accent: #4d9fff;        /* MAX Overview pane re-scope target (see :root) */
    --sort-desc: #e0a34a;
    --brand: var(--user-accent);
    --green: #2fa85a;
    --red: #ff381f;                /* = --brand (danger = brand); see :root[data-theme="dark"] note */
    --orange: #e0890f;
    --warn: #e0a83a;               /* amber caution / data-quality (MAX) */
    --used: #e0890f;
    --fctp: #9b75f0;
    --transit: #b9a3fb;
    --prior: #7a7d82;
    --total: var(--text);
    --store-buena-park: #3b82f6;
    --store-carlsbad: #e0344a;
    --store-redlands: #34b364;
    --fin-new: var(--store-buena-park);
    --fin-used: var(--used);
    --fin-fni: var(--fctp);
    --fin-service: #6670e8;
    --fin-parts: var(--green);
    --fin-body: #8b96a8;
    --mgr-fill-mix: 28%;   /* dark hues are brighter — see the light block's comment */
    --fin-kept: var(--green);
    --fin-burned: var(--warn);
    --fin-statement-bg: #f6f7f9;
    --fin-band-bg: #4a4f57;
    --row-tint: rgba(255, 255, 255, 0.03);
    --subheader-bg: rgba(255, 255, 255, 0.045);
    --accent-tint: rgba(77, 159, 255, 0.16);
    --brand-tint: color-mix(in srgb, var(--user-accent) 18%, transparent);
    --error-tint: rgba(255, 56, 31, 0.12);
    --hover-bg: #2a2a2a;
    --hover-border: #3a3a3a;
    --dot: rgba(255, 255, 255, 0.10);   /* canvas dot-field (auto → MAX) — legacy strength; account/admin-plane canvases */
    --dot-grain: rgba(255, 255, 255, 0.07);   /* canvas grain (auto → MAX) — under the legacy 0.10 dot; texture, not pattern */
    --canvas-glow: var(--gradient-ember-v2);   /* auto-dark canvas = ember v2, corner heat behind the header */
    --sh-1: 0 1px 2px rgba(0,0,0,0.45);
    --sh-2: 0 2px 8px rgba(0,0,0,0.50);
    --sh-3: 0 8px 24px rgba(0,0,0,0.55);
    --sh-4: 0 18px 50px rgba(0,0,0,0.60);
    --edge-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
    /* Energy glow — auto-dark: the luminous halo (overrides the light tight-shadow). */
    --glow-red-sm: 0 0 12px rgba(255, 59, 31, 0.45);
    --glow-red: 0 0 24px rgba(255, 59, 31, 0.45);
    --glow-red-lg: 0 0 48px rgba(255, 59, 31, 0.50);
    --glow-red-ring: 0 0 0 1px rgba(255, 59, 31, 0.55), 0 0 22px rgba(255, 59, 31, 0.35);
    --ring-focus: 0 0 0 3px rgba(255, 59, 31, 0.35);
  }
}

/* Store cue: the whole name reads in the store color, bold — the strongest,
   cleanest at-a-glance read (chip + underline both tried and reverted). */
.store-tag {
  font-weight: 700; text-decoration: none;
}
.store-tag.store-buena-park { color: var(--store-buena-park); }
.store-tag.store-carlsbad  { color: var(--store-carlsbad); }
.store-tag.store-redlands  { color: var(--store-redlands); }
/* Short label (BP/CB/RD/GRP) shown on phones; full name on larger screens. */
.store-tag .st-short { display: none; }
@media (max-width: 600px) {
  .store-tag .st-long  { display: none; }
  .store-tag .st-short { display: inline; }
}

/* ============================================================================
   DESIGN-BIBLE SEMANTIC LAYER — extra surfaces / brand-red tints / effects the
   bible component recipes (styles/bible.css + the restyled component classes)
   consume. Resolves per Light/Dark/Auto on top of the palette above. The
   functional blue --accent and the locked store/type/state colors are untouched;
   Energy Red (--user-accent / --brand) is the brand accent.
   ============================================================================ */
:root {
  --bg-elevated: var(--panel);
  --bg-sunken: var(--panel-2);
  --text-primary: var(--text);
  --brand-subtle: color-mix(in srgb, var(--user-accent) 12%, transparent);
  --brand-muted:  color-mix(in srgb, var(--user-accent) 20%, transparent);
  --brand-border: color-mix(in srgb, var(--user-accent) 42%, transparent);
  --backdrop-glass: saturate(130%) blur(16px);
  --gradient-ember-cta: radial-gradient(70% 120% at 50% 100%, color-mix(in srgb, var(--user-accent) 26%, transparent), transparent 62%);
  --gradient-scrim: linear-gradient(180deg, transparent 0%, rgba(11, 11, 13, 0.85) 100%);
  --gradient-chrome: linear-gradient(145deg, #f4f4f6 0%, #b9b9bf 26%, #65656c 52%, #dadadd 70%, #9a9aa1 100%);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);   /* light rim; dark blocks override */
}
:root[data-theme="dark"], :root[data-theme="max"] {
  --bg-elevated: #202024;   /* raised surface — a touch lighter than --panel */
  --bg-sunken: #060607;     /* deepest well */
  --text-primary: #ffffff;  /* bible white headline (brighter than the silver --text) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-elevated: #202024;
    --bg-sunken: #060607;
    --text-primary: #ffffff;
  }
}