/* ==========================================================================
   Nelson's Car Hire — Design tokens
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   Values are extracted from the existing site and consolidated — no new palette.
   Reference these via var(--token) from the per-page stylesheets.
   ========================================================================== */

:root {
    /* --- Brand (from the logo) ------------------------------------------- */
    --brand-cyan: #00abc7;
    --brand-cyan-dark: #0090a8; /* hover/active for cyan surfaces */
    --brand-red: #d7272e;
    --brand-red-dark: #b81f25; /* hover/active for red surfaces */
    --brand-navy: #1a3668;

    /* --- Neutrals (consolidated from 8 near-duplicate greys) ------------- */
    --ink: #212121; /* primary text */
    --ink-soft: #343434; /* secondary headings / icons */
    --muted: #5b5b5b; /* muted text (was 707070/757575/7a7a7a) */
    --border: #d6d6d6; /* hairline borders (was c4c4c4/d6d6d6) */
    --border-soft: #e6e6e6; /* lighter dividers */
    --surface: #ffffff; /* cards / inputs */
    --bg: #fafafa; /* page background */
    --bg-alt: #f4f4f4; /* alternating sections */

    /* --- Functional ------------------------------------------------------ */
    --success: #1f9d57;
    --danger: var(--brand-red);
    --overlay: rgba(0, 0, 0, 0.55); /* single image-overlay recipe */

    /* --- Typography ------------------------------------------------------ */
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --font-display: Vogie-Black, "Inter", sans-serif;

    --fs-xs: 0.75rem; /* 12 */
    --fs-sm: 0.875rem; /* 14 */
    --fs-base: 1rem; /* 16 */
    --fs-md: 1.125rem; /* 18 */
    --fs-lg: 1.375rem; /* 22 */
    --fs-xl: 1.75rem; /* 28 */
    --fs-2xl: 2.125rem; /* 34 */
    --fs-3xl: 2.75rem; /* 44 */
    --fs-display: 4rem; /* 64 */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;

    /* --- Spacing (4px base) ---------------------------------------------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* --- Radius ---------------------------------------------------------- */
    --r-xs: 2px;
    --r-sm: 6px; /* inputs */
    --r-md: 12px; /* cards */
    --r-lg: 20px; /* large panels */
    --r-pill: 100px; /* buttons / chips */

    /* --- Elevation ------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* --- Motion ---------------------------------------------------------- */
    --dur: 220ms;
    --ease: ease-in-out;

    /* --- Focus ----------------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(0, 171, 199, 0.45);
    --focus-outline: 2px solid var(--brand-cyan);
}

/* Breakpoint reference (kept as documentation — consolidate one-offs toward
   these tiers incrementally):
     --bp-sm: 560px;   phones
     --bp-md: 768px;   large phones / small tablets
     --bp-lg: 1024px;  tablets / small laptops
     --bp-xl: 1280px;  desktop
*/