/* =========================================================
   Design tokens
   ========================================================= */

:root {
  /* ── Surfaces ── */
  --bg:           #08090C;
  --bg-2:         #0C0E13;
  --surface:      #11141B;
  --surface-2:    #181C25;
  --surface-hi:   #232936;
  --line:         rgba(255, 255, 255, 0.07);
  --line-strong:  rgba(255, 255, 255, 0.14);
  --line-bright:  rgba(255, 255, 255, 0.28);

  /* ── Brand & accents ── */
  --accent:       #FF5436;      /* spaghetti coral */
  --accent-hi:    #FF7458;
  --accent-2:     #4D7FFF;      /* electric blue */
  --accent-3:     #00E5FF;      /* cyan */
  --accent-4:     #FFD60A;      /* yellow */
  --accent-5:     #B066FF;      /* purple */
  --accent-6:     #00D68F;      /* green */

  /* Gradients */
  --grad-hero:     linear-gradient(135deg, #FF5436 0%, #FF7458 35%, #FFD60A 100%);
  --grad-blue:     linear-gradient(135deg, #4D7FFF 0%, #00E5FF 100%);
  --grad-warm:     linear-gradient(135deg, #FF5436 0%, #FF2D7B 100%);
  --grad-text:     linear-gradient(180deg, #F4F1EA 0%, #B7B4AB 100%);
  --grad-mesh:     radial-gradient(ellipse at 20% 0%, rgba(77, 127, 255, 0.18), transparent 50%),
                   radial-gradient(ellipse at 80% 30%, rgba(255, 84, 54, 0.20), transparent 55%),
                   radial-gradient(ellipse at 50% 100%, rgba(176, 102, 255, 0.14), transparent 60%);

  /* ── Text ── */
  --text:         #F4F1EA;
  --text-soft:    rgba(244, 241, 234, 0.78);
  --text-muted:   rgba(244, 241, 234, 0.55);
  --text-faint:   rgba(244, 241, 234, 0.32);
  --text-dim:     rgba(244, 241, 234, 0.18);
  --on-accent:    #0A0A0A;

  /* ── Fonts ── */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono:    'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
  --font-body:    'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', 'Georgia', serif;

  /* ── Spacing ── */
  --pad-x:        clamp(1.25rem, 4vw, 4rem);
  --pad-y:        clamp(4rem, 10vw, 9rem);
  --gutter:       clamp(1rem, 2vw, 2rem);
  --max-w:        1440px;

  /* ── Radius ── */
  --r-sm:         6px;
  --r-md:         12px;
  --r-lg:         20px;
  --r-xl:         28px;
  --r-pill:       999px;

  /* ── Shadows ── */
  --shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 12px 36px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 28px 80px rgba(0, 0, 0, 0.45);
  --shadow-accent:0 16px 48px rgba(255, 84, 54, 0.35);
  --shadow-blue:  0 16px 48px rgba(77, 127, 255, 0.35);

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:       150ms var(--ease-out);
  --t-norm:       280ms var(--ease-out);
  --t-slow:       550ms var(--ease-out);
  --t-xslow:      900ms var(--ease-out);

  /* ── Z-index ladder ── */
  --z-base:       1;
  --z-nav:        90;
  --z-overlay:    100;
  --z-cursor:     9999;
}