/* ==========================================================================
AAREAS Dealer Portal — Design Tokens
--------------------------------------------------------------------------
Single source of truth for color, type, spacing, radius, elevation.
Import this ONCE, before component CSS and before any app styles.
Theming model (three states):
1. No attribute on -> follows the OS via prefers-color-scheme
2. -> forced light (beats a dark OS)
3. -> forced dark (beats a light OS)
Only the token VALUES change between themes. Never hard-code a hex in a
component — always reference a --token so both themes stay in sync.
========================================================================== */
/* ---- Fonts -------------------------------------------------------------- */
/* Load once in . Self-host in production for performance/privacy:
@font-face with woff2 files instead of the Google link below.
*/
:root {
/* ---- Neutrals (cool, biased toward the brand blue so they read chosen) - */
--ground: #EAEFF5; /* app background behind cards */
--surface: #FFFFFF; /* cards, panels, table surface */
--surface-2: #F5F8FC; /* subtle fills: hovers, inputs, meters */
--border: #DCE4EE; /* default hairline borders / dividers */
--border-strong: #C6D2E1; /* input borders, emphasized edges */
/* ---- Text ------------------------------------------------------------- */
--ink: #16202B; /* headings, primary text */
--ink-2: #46566A; /* body, secondary text */
--ink-3: #606D7D; /* captions, muted labels, meta (≥4.5:1 AA) */
/* ---- Brand ------------------------------------------------------------ */
--brand: #1E6FCB; /* primary action, links, active nav */
--brand-strong: #175CAC; /* primary button hover */
--brand-deep: #123A63; /* wordmark, headings-on-tint */
--brand-tint: #E7F1FC; /* active-nav bg, info surfaces */
--on-brand: #FFFFFF; /* text on a --brand fill (≥4.5:1) */
/* ---- Semantic (state) — separate from the brand accent ---------------- */
--success: #17794F;
--success-tint: #E3F5EC;
--warn: #946009;
--warn-tint: #FAF0DA;
--danger: #CE4238;
/* ---- Elevation -------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(18,58,99,.06), 0 1px 3px rgba(18,58,99,.05);
--shadow-md: 0 2px 4px rgba(18,58,99,.05), 0 8px 24px rgba(18,58,99,.08);
/* ---- Radius ----------------------------------------------------------- */
--radius: 14px; /* cards, panels */
--radius-sm: 9px; /* inputs, buttons, small chips */
--radius-pill: 999px;
/* ---- Type ------------------------------------------------------------- */
--font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif; /* headings, KPI numbers */
--font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; /* UI + running text */
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* data, prices, tokens */
/* Type scale (px). Headings use --font-display; body uses --font-body. */
--fs-display-xl: 32px; /* section titles */
--fs-display-lg: 25px; /* page headers */
--fs-display-md: 16px; /* card titles */
--fs-body: 15px; /* default body */
--fs-sm: 13.5px;/* buttons, secondary UI */
--fs-xs: 12.5px;/* meta */
--fs-label: 10.5px;/* uppercase mono labels (+.09em tracking) */
/* ---- Spacing scale (px) — use for gap/padding, don't invent values ---- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* Container */
--content-max: 1180px;
}
/* ---- Dark, following the OS (only when no explicit light choice) -------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ground: #0C1119;
--surface: #121B27;
--surface-2: #17212F;
--border: #263341;
--border-strong: #35434F;
--ink: #E9F0F8;
--ink-2: #A6B4C5;
--ink-3: #818FA0;
--brand: #4E97F0;
--brand-strong: #6FADF4;
--brand-deep: #A9CCF5;
--brand-tint: #16283E;
--on-brand: #0C1119;
--success: #37C08B;
--success-tint: #10281F;
--warn: #E0A24A;
--warn-tint: #29200F;
--danger: #E86A60;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
}
}
/* ---- Dark, forced by toggle (beats a light OS) ------------------------- */
:root[data-theme="dark"] {
--ground: #0C1119;
--surface: #121B27;
--surface-2: #17212F;
--border: #263341;
--border-strong: #35434F;
--ink: #E9F0F8;
--ink-2: #A6B4C5;
--ink-3: #818FA0;
--brand: #4E97F0;
--brand-strong: #6FADF4;
--brand-deep: #A9CCF5;
--brand-tint: #16283E;
--on-brand: #0C1119;
--success: #37C08B;
--success-tint: #10281F;
--warn: #E0A24A;
--warn-tint: #29200F;
--danger: #E86A60;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
}
/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--ground); /* explicit — never rely on the host ground */
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
margin: 0;
text-wrap: balance;
letter-spacing: -.01em;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--brand); }
/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}