/**
 * Cruise Design Tokens
 * Source of truth for brand palette, spacing, and typography.
 * These values are also defined in DESIGN.md at the repo root.
 */

:root {
    /* ── Palette ─────────────────────────────────────────────── */

    /* Primary — deep navy */
    --color-navy:        #1A2B4A;
    --color-navy-light:  #E8ECF2;
    --color-navy-muted:  #3D5278;
    --color-navy-dark:   #0F1A2E;

    /* Accent — warm amber */
    --color-amber:       #D97706;
    --color-amber-light: #FEF3C7;
    --color-amber-dark:  #B45309;

    /* Background */
    --color-cream:       #F8F7F4;
    --color-white:       #FFFFFF;

    /* Semantic */
    --color-sage:        #6B9E7A;
    --color-sage-light:  #E8F0E8;
    --color-alert:       #DC2626;
    --color-alert-light: #FEE2E2;
    --color-warn:        #D97706;
    --color-warn-light:  #FEF3C7;

    /* Text */
    --color-text-primary:   #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted:     #9CA3AF;

    /* Borders */
    --color-border:      #E5E7EB;
    --color-border-dark: #D1D5DB;

    /* ── Typography ──────────────────────────────────────────── */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */

    /* ── Spacing ─────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Border radius ───────────────────────────────────────── */
    --radius-sm:  0.5rem;   /* 8px */
    --radius-md:  0.75rem;  /* 12px */
    --radius-lg:  1rem;     /* 16px */
    --radius-xl:  1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(26,43,74,0.06), 0 1px 2px rgba(26,43,74,0.04);
    --shadow-md:  0 4px 12px rgba(26,43,74,0.08), 0 2px 4px rgba(26,43,74,0.04);
    --shadow-lg:  0 8px 24px rgba(26,43,74,0.10), 0 4px 8px rgba(26,43,74,0.06);
}