/* tokens.css — Push to Start Australia (PTS) design tokens.
   The single source of truth for colour, typography, spacing, radii, and
   motion across the public site and the Admin Fleet Builder (Requirement 7.1:
   one consistent design system). Component and base stylesheets reference
   these custom properties rather than raw values.

   Visual direction: high-energy automotive luxury — a deep near-black canvas
   with a fiery orange/amber accent, dramatic coastal-sunset/road imagery, an
   editorial serif display face, and a clean sans body face. Deliberately avoids
   generic AI styling (no Inter/Roboto/Arial body stacks, no purple-on-white
   gradients). */

:root {
  /* ---------------------------------------------------------------------
     Colour tokens (semantic). Indicative values per the design's Visual
     Design System. Foreground/background pairs used for body text meet
     >= 4.5:1 contrast (Requirement 8.3).
     --------------------------------------------------------------------- */
  --bg-base: #0b0b0c;          /* near-black page background */
  --bg-elevated: #141416;      /* cards, panels, inputs raised off the canvas */
  --text-primary: #f4f2ed;     /* warm off-white — body/headings on dark */
  --text-secondary: #b8b5ad;   /* muted secondary text/labels */
  --accent: #F26A21;           /* fiery sunset orange — CTAs, price, focus ring, badge, brand glow */
  --accent-contrast: #0b0b0c;  /* dark text/icon on accent fills */
  --danger: #e0726e;           /* validation errors (always paired with text/icon) */
  --border: #2a2a2e;           /* dividers, input borders */

  /* ---------------------------------------------------------------------
     Type families.
     Display: high-contrast editorial serif (Didone) for headings/vehicle names.
     Body: characterful clean sans for body and UI copy.
     Mono-ish tabular figures handled per-component via font-feature-settings.
     The leading font names map to self-hosted webfonts declared in base.css;
     the fallbacks keep the site legible and on-brand before fonts load/exist.
     --------------------------------------------------------------------- */
  --font-display: "Playfair Display", "Hoefler Text", "Georgia",
    "Times New Roman", serif;
  --font-body: "P2S Sans", ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------------
     Type scale — 12 steps, rem-based (root = 16px). Built from the design's
     12 / 14 / 16 / 18 / 24 / 32 / 48 / 64 scale and extended to a full
     12-step ramp for nuanced hierarchy. Base body text is --fs-3 (16px) to
     prevent iOS zoom on focus.
     --------------------------------------------------------------------- */
  --fs-1: 0.75rem;     /* 12px — fine print, captions */
  --fs-2: 0.875rem;    /* 14px — small UI text, labels */
  --fs-3: 1rem;        /* 16px — base body */
  --fs-4: 1.125rem;    /* 18px — lead body / large UI */
  --fs-5: 1.25rem;     /* 20px */
  --fs-6: 1.5rem;      /* 24px — h4 / section subheads */
  --fs-7: 2rem;        /* 32px — h3 */
  --fs-8: 2.5rem;      /* 40px — h2 */
  --fs-9: 3rem;        /* 48px — h1 */
  --fs-10: 3.5rem;     /* 56px — large display */
  --fs-11: 4rem;       /* 64px — hero display */
  --fs-12: 5rem;       /* 80px — oversized editorial display */

  /* ---------------------------------------------------------------------
     Line-height tokens. Loose for body readability (1.5–1.75); tight for
     large display headings (1.05–1.2).
     --------------------------------------------------------------------- */
  --lh-display: 1.1;   /* large serif headings */
  --lh-heading: 1.2;   /* smaller headings */
  --lh-body: 1.6;      /* default body */
  --lh-relaxed: 1.75;  /* long-form prose */

  /* Weights — limited to what is used to keep webfont payload small. */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-display: 600;
  --fw-display-bold: 700;

  /* Letter-spacing for uppercase eyebrow/tagline text. */
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* ---------------------------------------------------------------------
     Spacing scale — 4/8px system, rem-based. (4, 8, 12, 16, 24, 32, 48,
     64, 96). Named by their px value for legibility at call sites.
     --------------------------------------------------------------------- */
  --space-4: 0.25rem;   /* 4px */
  --space-8: 0.5rem;    /* 8px */
  --space-12: 0.75rem;  /* 12px */
  --space-16: 1rem;     /* 16px */
  --space-24: 1.5rem;   /* 24px */
  --space-32: 2rem;     /* 32px */
  --space-48: 3rem;     /* 48px */
  --space-64: 4rem;     /* 64px */
  --space-96: 6rem;     /* 96px */

  /* ---------------------------------------------------------------------
     Layout, radii, focus, and motion.
     --------------------------------------------------------------------- */
  --content-max: 1280px;       /* desktop content max-width */
  --content-narrow: 70ch;      /* long-form measure (~60–75 chars) */
  --gutter: var(--space-24);   /* default horizontal page gutter */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Visible focus ring (Requirement 8.4): 2–4px solid accent. */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Restrained motion defaults (durations 150–300ms, ease-out on enter). */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}