/* css/theme.css
 *
 * Every design token in the app lives here as a CSS custom property.
 * Nothing else in the stylesheet should hardcode a color, font, spacing
 * value, shadow, or timing — this file is the single source of truth for
 * the "luxury vehicle" aesthetic. The brand-level subset of these tokens
 * (shared with every non-kiosk surface built after Phase 1 — portal,
 * admin, landing, legal) now lives in css/brand-tokens.css instead —
 * linked as its own <link rel="stylesheet"> in index.html, immediately
 * before this file (also precached by sw.js), rather than @import'd here,
 * so it loads in parallel with every other stylesheet instead of adding a
 * sequential round-trip on a flaky in-car connection. What remains
 * declared directly below is kiosk-shell-only — see that file's own
 * header comment for exactly which names live where.
 */

:root {
  /* Driver-info popup's "Have a wonderful & safe day!" caption only — a
   * handwritten-feeling web-safe stack, no external font fetch. */
  --font-cursive: 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', 'Brush Script MT', cursive;

  --leading-serif: 1.15;
  --leading-body: 1.6;
  --tracking-hero: -0.01em;

  /* ---- Fluid spacing ----------------------------------------------------
   * A second, dvh-driven ladder for OUTER gaps/padding on any panel whose
   * full vertical stack must guarantee zero scrolling on short-height
   * tablet viewports (a landscape Xiaomi Pad 5 reports ~800px CSS height,
   * far short of the ~1600px this app's fixed --space-* ladder was tuned
   * against). Internal card content keeps the fixed ladder above, where a
   * little variance doesn't risk overflow — only outer stacking gaps opt
   * into these.
   */
  --space-fluid-xs: clamp(0.5rem, 1.5dvh, 0.875rem);
  --space-fluid-sm: clamp(0.75rem, 2dvh, 1.5rem);
  --space-fluid-md: clamp(1rem, 3dvh, 2.25rem);
  --space-fluid-lg: clamp(1.25rem, 4dvh, 3.25rem);

  /* ---- Depth: two-shadow technique ------------------------------------
   * --shadow-tight/--shadow-diffuse (light and dark values) come from
   * brand-tokens.css; this composite and the blur amount are kiosk-only.
   */
  --shadow-card: var(--shadow-tight), var(--shadow-diffuse);
  --glass-blur: 16px;

  /* ---- Motion ----------------------------------------------------------
   * --ease-standard and the tab/press/entrance/stagger durations come from
   * brand-tokens.css (including their prefers-reduced-motion
   * neutralization); breathing/ambient-drift are kiosk-only ambient loops,
   * switched off entirely under reduced motion rather than sped up — see
   * below.
   */
  --breathing-duration: 6s;
  --ambient-drift-duration: 72s;
}

/* ---- Light theme ---------------------------------------------------------
 * Only ever applied via an explicit toggle tap (see js/theme.js) — the app
 * always boots dark regardless of OS preference, so there is deliberately
 * no @media (prefers-color-scheme) block anywhere in this file. Warm ivory
 * base with the same amber accent family, darkened here for AA contrast
 * against a light surface.
 */
:root[data-theme='light'] {
  --color-bg-start: #f7f3ec;
  --color-bg-end: #ece5d8;
  --color-accent: #a9782e;
  --color-accent-soft: rgba(169, 120, 46, 0.35);
  --color-accent-faint: rgba(169, 120, 46, 0.14);
  --color-text-primary: #211d16;
  --color-text-secondary: #6b6355;

  --color-surface: rgba(255, 255, 255, 0.55);
  --color-surface-raised: rgba(255, 255, 255, 0.72);
  --color-hairline: rgba(169, 120, 46, 0.3);
  --color-hairline-faint: rgba(33, 29, 22, 0.09);
  --color-scrim: rgba(247, 243, 236, 0.75);
  --color-vignette-edge: rgba(90, 74, 40, 0.14);

  /* Depth needs to soften too — the dark theme's shadows assume a near-
   * black backdrop; the same opacity on ivory reads as dirty smudging. */
  --shadow-tight: 0 2px 8px rgba(80, 65, 40, 0.16);
  --shadow-diffuse: 0 28px 70px rgba(80, 65, 40, 0.18);
}

/* --duration-tab/--duration-press/--duration-entrance/--stagger-step are
 * already neutralized under prefers-reduced-motion by brand-tokens.css.
 * Looping animations (breathing, ambient drift, shimmer) are switched off
 * entirely elsewhere (css/animations.css, css/base.css) rather than sped
 * up — a fast infinite loop is worse for motion sensitivity than none. */