/* 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; } /* ============================================================================ THEMES (2026-06-04): Light · Dark · Auto. **Dark IS the MAX "Performance Layer"** (graphite/gunmetal/aluminum). Auto follows the OS (light or MAX-dark). Two accents: --accent (informational BLUE — pace/pivot/links/data cadence) and --brand (Performance 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; --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: var(--font-sans); --font-brand: var(--font-sans); --font-hero: 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; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --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); --max-graphite: #161616; --max-gunmetal: #232323; --max-aluminum: #c9cbce; --max-red: #c71b23; /* User-pickable accent (Settings → Display). Defaults to Max's red; the kgf_accent cookie overrides it inline on (shell.html bootstrap). Everything "Max red" routes through this — chat surface, FAB, dock mark, MAX-dark brand chrome. The informational blue --accent is NOT affected. */ --user-accent: var(--max-red); /* Text color on --user-accent fills (bubble, CTAs, FAB). White by default; core.js/shell.html flip it dark for bright picks (Grabber Yellow etc). */ --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 */ --brand: var(--accent); /* brand chrome (= accent in light, red in MAX) */ --green: #2d8a4e; --red: #bf0a30; /* genuinely-bad only */ --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; --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: rgba(0, 102, 179, 0.12); --error-tint: rgba(191, 10, 48, 0.08); --hover-bg: #e0e5eb; --hover-border: #b8c0c8; --dot: rgba(20, 20, 45, 0.14); /* canvas dot-field (light) */ } /* DARK = MAX "Performance Layer". Explicit ([data-theme="dark"]) or via Auto (system dark). --accent stays BLUE (data cadence); --brand is Performance 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: "FordAntenna Comp", "FordAntenna", var(--font-sans); --font-hero: "FordAntenna Comp", "FordAntenna", var(--font-sans); --bg: var(--max-graphite); --panel: var(--max-gunmetal); --panel-2: #2a2a2a; --border: #313131; --text: var(--max-aluminum); --text-dim: #8a8c90; --text-muted: #6e7074; --accent: #4d9fff; /* bright informational blue on graphite */ --brand: var(--user-accent); /* Performance Red — active nav / CTAs / brand */ --green: #2fa85a; --red: #e0344a; /* bad (90+ buckets, negative deltas) */ --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; --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(224, 52, 74, 0.12); --hover-bg: #2a2a2a; --hover-border: #3a3a3a; --dot: rgba(255, 255, 255, 0.10); /* canvas dot-field (MAX/dark) */ --sh-1: 0 1px 3px rgba(0,0,0,0.40); --sh-2: 0 4px 14px rgba(0,0,0,0.45); --sh-3: 0 8px 24px rgba(0,0,0,0.50); --sh-4: 0 16px 48px rgba(0,0,0,0.55); } /* AUTO (no cookie / 'auto') follows the OS: system-dark → MAX. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --font-brand: "FordAntenna Comp", "FordAntenna", var(--font-sans); --font-hero: "FordAntenna Comp", "FordAntenna", var(--font-sans); --bg: var(--max-graphite); --panel: var(--max-gunmetal); --panel-2: #2a2a2a; --border: #313131; --text: var(--max-aluminum); --text-dim: #8a8c90; --text-muted: #6e7074; --accent: #4d9fff; --brand: var(--user-accent); --green: #2fa85a; --red: #e0344a; --orange: #e0890f; --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; --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(224, 52, 74, 0.12); --hover-bg: #2a2a2a; --hover-border: #3a3a3a; --dot: rgba(255, 255, 255, 0.10); /* canvas dot-field (auto → MAX) */ --sh-1: 0 1px 3px rgba(0,0,0,0.40); --sh-2: 0 4px 14px rgba(0,0,0,0.45); --sh-3: 0 8px 24px rgba(0,0,0,0.50); --sh-4: 0 16px 48px rgba(0,0,0,0.55); } } /* 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; } }