/*
 * CarAI / Lobbi Motors -- customer-facing design tokens.
 *
 * Single source of truth for color/type/spacing/radius. Components in
 * style.css MUST consume these custom properties -- never a hardcoded
 * hex/px value inside a component rule.
 *
 * ---------------------------------------------------------------------
 * Design rationale (why this palette, not the real site's, not an
 * AI-cliche default):
 *
 * The real lobbimotors.com site (red #e20714 / near-black / white) was
 * independently flagged by the business owner as "too WordPress-ish"/
 * "too Matrix-produced" -- generic, templated. Inheriting that palette
 * for the new product would just re-import the exact problem being
 * solved for, so it is NOT reused here, even softened.
 *
 * Instead this system is drawn from the actual world the business
 * operates in, not from generic "used car dealer" or "SaaS product"
 * visual vocabulary:
 *
 *   - Ink & paper are cool-toned (blue-grey), not the warm cream +
 *     near-black pairing AI design defaults to. The reference point is
 *     technical/marine documents -- chart paper, manifests, customs
 *     declarations -- not a coffee-shop menu.
 *   - Amber/brass is the primary accent: the color of a stamped VIN
 *     plate and of US salvage-auction lot-tag signage (the actual
 *     sourcing side of this business). It reads as functional and
 *     industrial, not as a decorative neon/vermilion "AI pop" color.
 *   - Teal is the secondary accent: ocean-freight/marine, standing for
 *     the Rotterdam-route logistics half of the business (the EU/
 *     Bulgaria import side). Two accents with distinct *jobs* --
 *     sourcing vs. transport -- rather than one accent used
 *     decoratively everywhere.
 *   - Good/warning/critical are a THIRD, separate hue set (green/
 *     ochre/brick), used only for title/listing status -- they never
 *     double as the brand accent, per the "semantic color isn't your
 *     accent" rule.
 *   - Radii are small (2-6px), evoking a stamped tag or a printed
 *     form, not the soft "rounded-lg everywhere" bubble-card look.
 *
 * Typography:
 *   - Display: Big Shoulders Display -- a condensed industrial
 *     grotesk that reads like stenciled shipping/container lettering.
 *     Used sparingly (headings only), not as body text.
 *   - Body: Public Sans -- the US federal government's official
 *     typeface (designed for USA.gov and federal forms). A quiet,
 *     deliberate nod to this business's world of US titles, auction
 *     paperwork, and customs documents -- not "Inter/Space Grotesk
 *     because it's safe."
 *   - Data/mono: IBM Plex Mono -- for VINs, odometer readings, prices,
 *     and any tabular figures, so digits actually line up (data-plate
 *     legibility), styled with `font-variant-numeric: tabular-nums`.
 * ---------------------------------------------------------------------
 */

:root {
  /* ---- Color: surfaces & ink (cool, chosen -- not pure black/white, not warm cream) ---- */
  --color-bg: #eef1f3;
  --color-surface: #ffffff;
  --color-surface-raised: #f7f9fa;
  --color-surface-sunken: #e4e9ec;
  --color-border: #d5dce0;
  --color-border-strong: #b6c0c6;

  --color-ink: #12181f;
  --color-ink-muted: #4f5d68;
  --color-ink-faint: #85929c;
  --color-ink-on-accent: #171208;

  /* ---- Color: brand accents (two, each with a distinct job) ---- */
  --color-amber: #b8790f;       /* sourcing: US auction / bid / lot-tag signal */
  --color-amber-strong: #96620a;
  --color-amber-bg: #f7ecd6;

  --color-teal: #0f625d;        /* logistics: ocean freight / EU-Bulgaria route */
  --color-teal-strong: #0b4d49;
  --color-teal-bg: #dcedec;

  /* ---- Color: semantic (title/listing status -- distinct hues, not the accents) ---- */
  --color-good: #2f7d4f;
  --color-good-bg: #e3f1e7;
  --color-warning: #a15c07;
  --color-warning-bg: #f7ecd8;
  --color-critical: #a3352c;
  --color-critical-bg: #f8e3e0;

  --color-focus-ring: #0f625d;

  /* ---- Color: damage severity ramp (5-step, semantic -- used ONLY by
     the damage-zone map, never as a brand accent; distinct hues from
     --color-good/warning/critical above, not a re-skin of them, since
     "none" needs a true neutral and the ramp needs 5 stops not 3) ---- */
  --color-sev-0: #c7ced3;   /* none -- neutral, same family as --color-border-strong */
  --color-sev-1: #2f8f5b;   /* minor */
  --color-sev-2: #c99a1f;   /* moderate */
  --color-sev-3: #cf7a2c;   /* major */
  --color-sev-4: #b5382c;   /* severe / structural */

  /* ---- Typography ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 3rem;

  --line-tight: 1.1;
  --line-snug: 1.3;
  --line-normal: 1.55;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radius (small/crisp -- a stamped tag, not a bubble card) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---- Elevation & structure ---- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --shadow-sm: 0 1px 2px rgba(18, 24, 31, 0.08);
  --shadow-md: 0 4px 16px rgba(18, 24, 31, 0.12);

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ---- Layout ---- */
  --container-max: 1240px;
}

/* Dark mode, OS-level signal. Redefine tokens only -- components never
   branch on the media query directly. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1317;
    --color-surface: #171d22;
    --color-surface-raised: #1d242a;
    --color-surface-sunken: #0b0e11;
    --color-border: #2b333a;
    --color-border-strong: #3c454c;

    --color-ink: #e7ebee;
    --color-ink-muted: #a3b0b8;
    --color-ink-faint: #6b7780;
    --color-ink-on-accent: #12181f;

    --color-amber: #d9a13c;
    --color-amber-strong: #f0b654;
    --color-amber-bg: #2c2210;

    --color-teal: #2ba89f;
    --color-teal-strong: #3fc2b8;
    --color-teal-bg: #102523;

    --color-good: #4caf72;
    --color-good-bg: #16301e;
    --color-warning: #d99a3d;
    --color-warning-bg: #332608;
    --color-critical: #e2685c;
    --color-critical-bg: #3a1a16;

    --color-focus-ring: #3fc2b8;

    --color-sev-0: #454e56;
    --color-sev-1: #4caf72;
    --color-sev-2: #d9a13c;
    --color-sev-3: #e08a44;
    --color-sev-4: #e2685c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
}

/* Explicit theme toggle overrides -- must win over the media query in
   BOTH directions, since the viewer's toggle can disagree with the OS
   preference. Attribute selectors outrank the plain :root the media
   query targets, so these always take precedence regardless of source
   order. */
:root[data-theme="dark"] {
  --color-bg: #0f1317;
  --color-surface: #171d22;
  --color-surface-raised: #1d242a;
  --color-surface-sunken: #0b0e11;
  --color-border: #2b333a;
  --color-border-strong: #3c454c;

  --color-ink: #e7ebee;
  --color-ink-muted: #a3b0b8;
  --color-ink-faint: #6b7780;
  --color-ink-on-accent: #12181f;

  --color-amber: #d9a13c;
  --color-amber-strong: #f0b654;
  --color-amber-bg: #2c2210;

  --color-teal: #2ba89f;
  --color-teal-strong: #3fc2b8;
  --color-teal-bg: #102523;

  --color-good: #4caf72;
  --color-good-bg: #16301e;
  --color-warning: #d99a3d;
  --color-warning-bg: #332608;
  --color-critical: #e2685c;
  --color-critical-bg: #3a1a16;

  --color-focus-ring: #3fc2b8;

  --color-sev-0: #454e56;
  --color-sev-1: #4caf72;
  --color-sev-2: #d9a13c;
  --color-sev-3: #e08a44;
  --color-sev-4: #e2685c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --color-bg: #eef1f3;
  --color-surface: #ffffff;
  --color-surface-raised: #f7f9fa;
  --color-surface-sunken: #e4e9ec;
  --color-border: #d5dce0;
  --color-border-strong: #b6c0c6;

  --color-ink: #12181f;
  --color-ink-muted: #4f5d68;
  --color-ink-faint: #85929c;
  --color-ink-on-accent: #171208;

  --color-amber: #b8790f;
  --color-amber-strong: #96620a;
  --color-amber-bg: #f7ecd6;

  --color-teal: #0f625d;
  --color-teal-strong: #0b4d49;
  --color-teal-bg: #dcedec;

  --color-good: #2f7d4f;
  --color-good-bg: #e3f1e7;
  --color-warning: #a15c07;
  --color-warning-bg: #f7ecd8;
  --color-critical: #a3352c;
  --color-critical-bg: #f8e3e0;

  --color-focus-ring: #0f625d;

  --color-sev-0: #c7ced3;
  --color-sev-1: #2f8f5b;
  --color-sev-2: #c99a1f;
  --color-sev-3: #cf7a2c;
  --color-sev-4: #b5382c;

  --shadow-sm: 0 1px 2px rgba(18, 24, 31, 0.08);
  --shadow-md: 0 4px 16px rgba(18, 24, 31, 0.12);
}

/*
 * ---------------------------------------------------------------------
 * "corporate" template -- enterprise/insurance-audience skin, selected
 * GLOBALLY via `CARAI_TEMPLATE=corporate` (see `app.template_config`,
 * which stamps `data-template` on `<html>` in
 * `app/templates/customer/base.html`). Purely ADDITIVE: the default
 * "lobbi" `:root` block above is untouched, and every component in
 * style.css keeps reading the same token NAMES -- this axis just
 * redefines what those names resolve to.
 *
 * Design rationale (opposite brief from "lobbi" on purpose -- the
 * founder's ServiceNow-style enterprise tool is the reference, not a
 * recolor of the consumer site):
 *
 *   - Blue (~#2f6fed) becomes the ONE brand accent, sitting in the
 *     `--color-amber`/`--color-amber-strong`/`--color-amber-bg` token
 *     slots. That's deliberate, not a naming mismatch: every component
 *     that used lobbi's amber as ITS primary-action/selected-state
 *     color (`.btn-primary`, `.wordmark span`, `.chip--source`,
 *     `.report-persona-tab[aria-selected]`, `.cost-calc__bid-field`,
 *     `.cc-total__eur`, ...) automatically becomes blue by simply
 *     repointing this token, with zero style.css edits -- exactly what
 *     the token architecture is for. `--color-teal` (secondary accent,
 *     "the other job") becomes a steel-blue instead of marine teal, so
 *     the two accents stay in the same cool corporate family instead of
 *     clashing with the new primary blue.
 *   - Amber survives ONLY as `--color-warning` -- a muted gold "medium
 *     confidence / needs review" status hue, not a brand accent. It
 *     never appears in a solid-fill/primary-action role here.
 *   - Ink/surfaces are white cards on a cool blue-white background
 *     (~#f4f7fb), not lobbi's chart-paper blue-grey -- closer to a
 *     SaaS admin console than a technical document.
 *   - Typography drops Big Shoulders Display entirely (no condensed
 *     industrial display face) in favor of a plain system-UI stack for
 *     BOTH display and body -- reads as neutral enterprise software,
 *     not a "brand". Renders as Segoe UI on Windows, San Francisco on
 *     Apple platforms, Roboto on Android/Chrome OS: zero new font
 *     requests, so this can never be the thing that breaks under a
 *     CSP. IBM Plex Mono (already loaded for lobbi) stays as the data
 *     face for VINs/prices -- the brief for that face was already
 *     "neutral data-plate legibility", equally correct here.
 *   - Density: the whole 4px-based spacing scale is compressed
 *     (`--space-7`..`--space-9` most aggressively, since those drive
 *     page-level rhythm), tracking on uppercase mono labels is tighter,
 *     and radii shrink from lobbi's already-small 2/4/6px down to a
 *     near-sharp 1/2/3px plus a non-pill 4px badge radius -- an
 *     enterprise data-grid feel instead of a stamped-tag/bubble-card
 *     feel. Font sizes step down slightly too (no more 48px hero type
 *     now that there's no condensed display face to carry it).
 * ---------------------------------------------------------------------
 */

:root[data-template="corporate"] {
  /* ---- Color: surfaces & ink (white cards on cool blue-white) ---- */
  --color-bg: #e8edf4;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f4f9;
  --color-surface-sunken: #dde4ee;
  --color-border: #d3dbe6;
  --color-border-strong: #bcc7d4;

  --color-ink: #1c2733;
  --color-ink-muted: #5a6b7b;
  --color-ink-faint: #8a99a8;
  --color-ink-on-accent: #ffffff;

  /* ---- Color: brand accents -- see file-header rationale for why
     the primary accent lives in the `--color-amber*` slots ---- */
  --color-amber: #2f6fed;
  --color-amber-strong: #1f4fd0;
  --color-amber-bg: #eef4ff;

  --color-teal: #3d5a80;
  --color-teal-strong: #2c4460;
  --color-teal-bg: #e8edf5;

  /* ---- Color: semantic -- --color-warning is where amber survives,
     as a muted gold status hue, never the brand accent ---- */
  --color-good: #1a7f4e;
  --color-good-bg: #e4f5ec;
  --color-warning: #9c6b12;
  --color-warning-bg: #faf1de;
  --color-critical: #c0362c;
  --color-critical-bg: #fbe7e5;

  --color-focus-ring: #2f6fed;

  /* ---- Color: damage severity ramp (5-step) ---- */
  --color-sev-0: #ccd4dd;
  --color-sev-1: #2f9e6a;
  --color-sev-2: #d9a520;
  --color-sev-3: #e07830;
  --color-sev-4: #d13438;

  /* ---- Typography: neutral corporate sans (system stack, no CDN
     font, no condensed display face) + the existing mono for data ---- */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;

  --line-tight: 1.15;
  --line-snug: 1.35;
  --line-normal: 1.5;

  --tracking-wide: 0.03em;
  --tracking-wider: 0.06em;

  /* ---- Spacing scale -- compressed vs. lobbi's, most aggressively at
     the top end (page-level rhythm), for an enterprise-dense feel ---- */
  --space-1: 0.25rem;
  --space-2: 0.4375rem;
  --space-3: 0.625rem;
  --space-4: 0.875rem;
  --space-5: 1.125rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.75rem;
  --space-9: 4rem;

  /* ---- Radius: near-sharp -- data-grid, not stamped-tag/bubble-card;
     `--radius-pill` becomes a small badge radius, not a full stadium
     pill, matching the ServiceNow-style reference. ---- */
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-pill: 4px;

  /* ---- Elevation (tinted from --color-ink, same convention as lobbi) ---- */
  --shadow-sm: 0 1px 2px rgba(28, 39, 51, 0.08);
  --shadow-md: 0 4px 14px rgba(28, 39, 51, 0.12);
}

/* Dark mode, OS-level signal -- same convention as lobbi's dark block
   above: color tokens only, never font/spacing/radius (those don't
   change between light/dark). */
@media (prefers-color-scheme: dark) {
  :root[data-template="corporate"] {
    --color-bg: #0f151d;
    --color-surface: #171f29;
    --color-surface-raised: #1d2733;
    --color-surface-sunken: #0b1015;
    --color-border: #2a3542;
    --color-border-strong: #3c4b5a;

    --color-ink: #e7ecf3;
    --color-ink-muted: #a7b4c2;
    --color-ink-faint: #74869a;
    --color-ink-on-accent: #ffffff;

    --color-amber: #6f9df8;
    --color-amber-strong: #93b8fb;
    --color-amber-bg: #17233a;

    --color-teal: #7c9bc4;
    --color-teal-strong: #9db7d8;
    --color-teal-bg: #1c2a3a;

    --color-good: #3ecf8e;
    --color-good-bg: #123322;
    --color-warning: #e0ac4a;
    --color-warning-bg: #3a2c10;
    --color-critical: #f0655c;
    --color-critical-bg: #3d1a17;

    --color-focus-ring: #6f9df8;

    --color-sev-0: #3a4552;
    --color-sev-1: #3ecf8e;
    --color-sev-2: #e0ac4a;
    --color-sev-3: #e89152;
    --color-sev-4: #f0655c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
  }
}

/* Explicit theme toggle overrides for the corporate template -- must
   win over both the plain corporate block above AND the media query,
   in both directions, same reasoning as lobbi's explicit overrides
   below. The extra `[data-template="corporate"]` attribute selector
   gives these strictly higher specificity than lobbi's own
   `:root[data-theme="dark|light"]` blocks, so a corporate page never
   inherits a lobbi color by accident regardless of source order. */
:root[data-template="corporate"][data-theme="dark"] {
  --color-bg: #0f151d;
  --color-surface: #171f29;
  --color-surface-raised: #1d2733;
  --color-surface-sunken: #0b1015;
  --color-border: #2a3542;
  --color-border-strong: #3c4b5a;

  --color-ink: #e7ecf3;
  --color-ink-muted: #a7b4c2;
  --color-ink-faint: #74869a;
  --color-ink-on-accent: #ffffff;

  --color-amber: #6f9df8;
  --color-amber-strong: #93b8fb;
  --color-amber-bg: #17233a;

  --color-teal: #7c9bc4;
  --color-teal-strong: #9db7d8;
  --color-teal-bg: #1c2a3a;

  --color-good: #3ecf8e;
  --color-good-bg: #123322;
  --color-warning: #e0ac4a;
  --color-warning-bg: #3a2c10;
  --color-critical: #f0655c;
  --color-critical-bg: #3d1a17;

  --color-focus-ring: #6f9df8;

  --color-sev-0: #3a4552;
  --color-sev-1: #3ecf8e;
  --color-sev-2: #e0ac4a;
  --color-sev-3: #e89152;
  --color-sev-4: #f0655c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
}

:root[data-template="corporate"][data-theme="light"] {
  --color-bg: #e8edf4;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f4f9;
  --color-surface-sunken: #dde4ee;
  --color-border: #d3dbe6;
  --color-border-strong: #bcc7d4;

  --color-ink: #1c2733;
  --color-ink-muted: #5a6b7b;
  --color-ink-faint: #8a99a8;
  --color-ink-on-accent: #ffffff;

  --color-amber: #2f6fed;
  --color-amber-strong: #1f4fd0;
  --color-amber-bg: #eef4ff;

  --color-teal: #3d5a80;
  --color-teal-strong: #2c4460;
  --color-teal-bg: #e8edf5;

  --color-good: #1a7f4e;
  --color-good-bg: #e4f5ec;
  --color-warning: #9c6b12;
  --color-warning-bg: #faf1de;
  --color-critical: #c0362c;
  --color-critical-bg: #fbe7e5;

  --color-focus-ring: #2f6fed;

  --color-sev-0: #ccd4dd;
  --color-sev-1: #2f9e6a;
  --color-sev-2: #d9a520;
  --color-sev-3: #e07830;
  --color-sev-4: #d13438;

  --shadow-sm: 0 1px 2px rgba(28, 39, 51, 0.08);
  --shadow-md: 0 4px 14px rgba(28, 39, 51, 0.12);
}