/* ─────────────────────────────────────────────────────────
   variables.css — All design tokens
   Every color, font, spacing, and transition value lives
   here. Never hardcode these values anywhere else.
───────────────────────────────────────────────────────── */

:root {

    /* ── Colors ─────────────────────────────────────────── */
    --black:        #000000;
    --white:        #ffffff;
    --grey-900:     #0a0a0a;
    --grey-800:     #111111;
    --grey-700:     #1a1a1a;
    --grey-600:     #222222;
    --grey-400:     #666666;
    --grey-300:     #999999;
    --grey-200:     #cccccc;
  
    /* ── Typography ─────────────────────────────────────── */
    --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:    'Inter', sans-serif;
  
    --size-xs:   11px;
    --size-sm:   13px;
    --size-base: 15px;
    --size-md:   20px;
    --size-lg:   32px;
    --size-xl:   56px;
  
    /* ── Spacing ─────────────────────────────────────────── */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  32px;
    --space-lg:  64px;
    --space-xl:  120px;
  
    /* ── Layout ──────────────────────────────────────────── */
    --max-width:    1440px;
    --padding-page: 48px;
    --grid-gap:     24px;
  
    /* ── Transitions ─────────────────────────────────────── */
    --transition-base: 300ms ease;
    --transition-slow: 600ms ease;
  
    /* ── Borders ─────────────────────────────────────────── */
    --border-subtle:  1px solid rgba(255, 255, 255, 0.06);
    --border-medium:  1px solid rgba(255, 255, 255, 0.12);
    --border-strong:  1px solid rgba(255, 255, 255, 0.25);
  
    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.6);
  
  }