/* ==========================================================================
   dessoyracing.com design tokens  -  the ONE :root block for the whole site.
   Every page links this file before its own inline <style>.
   Never hard-code a colour, radius or shadow in a page: add/choose a token here.
   See DESIGN.md for what each token is for.
   ========================================================================== */

:root {
    /* ---- Brand colours (do not change) ---- */
    --primary: #e63946;
    --secondary: #1d3557;
    --accent: #f1faee;
    --dark: #0a0a0a;
    --light: #ffffff;

    /* ---- Neutrals: text ---- */
    --ink: #333;            /* body text */
    --ink-strong: #444;
    --ink-soft: #555;
    --ink-muted: #666;      /* secondary text */
    --ink-faint: #999;      /* placeholder / disabled */

    /* ---- Neutrals: lines and surfaces ---- */
    --line: #ddd;
    --line-soft: #eee;
    --line-strong: #ccc;
    --surface: #f5f5f5;

    /* ---- Status and tiers ---- */
    --success: #4caf50;
    --warning: #ff9800;
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #721c24;
    --alert-danger-border: #f5c6cb;
    --gold: #ffd700;
    --silver: #c0c0c0;
    --bronze: #cd7f32;

    /* ---- Typography ----
       System UI font: SF Pro on Mac/iPhone, Segoe UI on Windows, Roboto on Android.
       To use a self-hosted web font later, change this one line. */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-hero: clamp(2.5rem, 7vw, 4rem);

    /* ---- Spacing scale (use for new CSS) ---- */
    --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;

    /* ---- Radius ---- */
    --radius-sm: 5px;
    --radius: 10px;         /* cards, images, boxes */
    --radius-lg: 15px;
    --radius-pill: 50px;    /* buttons */

    /* ---- Shadows ---- */
    --shadow-card: 0 5px 15px rgba(0,0,0,0.1);
    --shadow-header: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-lift: 0 10px 20px rgba(0,0,0,0.2);

    /* ---- Hero: text-contrast overlay (white text >= 5.9:1 on all three hero photos) ---- */
    --hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.68) 45%, rgba(10,10,10,0.85) 100%);
}