/* ============================================================
   IC7 Game — Design Tokens ("Crimson Arcade")
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */
:root {
  /* ---- Colour: surfaces ---- */
  --color-bg: #0A0A0C;
  --color-bg-2: #0E0E11;
  --color-surface: #18181B;
  --color-surface-2: #1F1F23;
  --color-surface-3: #26262B;

  /* ---- Colour: crimson accent system ---- */
  --color-accent: #E10600;
  --color-accent-hot: #FF1E2D;
  --color-accent-deep: #8B0000;
  --color-accent-soft: rgba(225, 6, 0, 0.14);

  /* ---- Colour: gold (money callouts only) ---- */
  --color-gold: #FFB800;
  --color-gold-soft: #FFD466;

  /* ---- Colour: text ---- */
  --color-text-primary: #F5F5F5;
  --color-text-secondary: #A0A0A0;
  --color-text-muted: #6A6A70;
  --color-border: #2A2A2E;
  --color-border-strong: #3A3A40;

  /* ---- Colour: status ---- */
  --color-success: #00C853;
  --color-error: #FF4444;

  /* ---- Gradients ---- */
  --grad-crimson: linear-gradient(135deg, #FF1E2D 0%, #E10600 45%, #8B0000 100%);
  --grad-crimson-soft: linear-gradient(135deg, rgba(255,30,45,0.9), rgba(139,0,0,0.9));
  --grad-gold: linear-gradient(135deg, #FFD466 0%, #FFB800 55%, #C98A00 100%);
  --grad-surface: linear-gradient(160deg, #1F1F23 0%, #141417 100%);
  --grad-hero-glow: radial-gradient(60% 55% at 50% 35%, rgba(225,6,0,0.28) 0%, rgba(139,0,0,0.10) 40%, transparent 72%);

  /* ---- Typography ---- */
  --font-display: 'Rajdhani', 'Bebas Neue', system-ui, sans-serif;
  --font-body: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-body: clamp(0.98rem, 1.1vw, 1.06rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* ---- Shadows / glow ---- */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-card-lg: 0 18px 48px rgba(0,0,0,0.6);
  --shadow-glow-red: 0 0 24px rgba(225,6,0,0.35);
  --shadow-glow-red-strong: 0 0 48px rgba(255,30,45,0.5);
  --shadow-glow-gold: 0 0 24px rgba(255,184,0,0.3);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

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

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-toast: 500;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;
}