/* css/brand-tokens.css
 *
 * Brand-level design tokens shared by every RideCanvas surface — the
 * kiosk shell (via css/theme.css, which imports this file and sources its
 * palette/type/spacing/motion tokens from it) and every surface built
 * after Phase 1 (portal, admin, landing, legal). Custom-property *names*
 * are unchanged from theme.css's original single-file version — only
 * where they're declared moved.
 *
 * What deliberately isn't here, and stays kiosk-shell-only in theme.css:
 *   --font-cursive                     driver-info popup only
 *   --leading-serif/--leading-body/--tracking-hero   kiosk-tuned type
 *     refinement, re-verify rather than assume elsewhere
 *   --space-fluid-*                    dvh-driven outer-gap ladder, tuned
 *     for the kiosk's fixed-viewport tablet layout
 *   --glass-blur, --shadow-card        glass-morphism specifics; re-verify
 *     contrast before reusing on a new background (see §2.3)
 *   --breathing-duration/--ambient-drift-duration   kiosk-only ambient
 *     idle motion, not a general UI pattern
 *
 * See docs/plan/00-implementation-plan.md §4.5.
 */

:root {
  /* ---- Palette --------------------------------------------------------
   * Deep near-black charcoal base, one warm metallic accent, off-white
   * primary text, muted warm grey secondary text. No pure black/white,
   * no second accent color — restraint is the point.
   */
  --color-bg-start: #0b0b0d;
  --color-bg-end: #14141a;
  --color-accent: #c9a15a;
  --color-accent-soft: rgba(201, 161, 90, 0.35);
  --color-accent-faint: rgba(201, 161, 90, 0.14);
  --color-text-primary: #f4f1ea;
  --color-text-secondary: #8a8578;

  --color-surface: rgba(20, 20, 24, 0.55);
  --color-surface-raised: rgba(26, 26, 31, 0.65);
  --color-hairline: rgba(201, 161, 90, 0.22);
  --color-hairline-faint: rgba(244, 241, 234, 0.08);
  --color-scrim: rgba(11, 11, 13, 0.72);
  --color-vignette-edge: rgba(0, 0, 0, 0.45);

  /* ---- Typography -------------------------------------------------- */
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-hero: clamp(2.75rem, 5.4vw, 4.75rem);
  --text-title: clamp(1.4rem, 2.3vw, 2.1rem);
  --text-body: clamp(1rem, 1.25vw, 1.2rem);
  --text-caption: clamp(0.78rem, 1vw, 0.92rem);

  /* ---- Spacing (fixed five-step ladder only — see the fluid, dvh-driven
   * ladder in theme.css for kiosk-only outer-gap use) ------------------ */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;

  /* ---- Radii & depth --------------------------------------------------- */
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-sm: 12px;

  --shadow-tight: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-diffuse: 0 28px 70px rgba(0, 0, 0, 0.55);

  /* ---- Motion ----------------------------------------------------------
   * Calm, confident, GPU-friendly. Transforms/opacity only.
   */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-tab: 280ms;
  --duration-press: 180ms;
  --duration-entrance: 420ms;
  --stagger-step: 60ms;
}

/* Respect the OS-level motion preference everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-tab: 1ms;
    --duration-press: 1ms;
    --duration-entrance: 1ms;
    --stagger-step: 0ms;
  }
}