/* =============================================================
   IC7 GAME — Design Tokens (Crimson Forge)
   All :root custom properties live here.
   ============================================================= */
:root {
  /* === CRIMSON FORGE PALETTE === */
  --color-bg:           #0A0A0C;
  --color-bg-2:         #111116;
  --color-surface:      #18181F;
  --color-surface-2:    #1E1E27;
  --color-surface-3:    #242430;

  --color-red-500:      #E8192C;
  --color-red-600:      #C91020;
  --color-red-400:      #FF2D42;
  --color-red-glow:     rgba(232, 25, 44, 0.25);
  --color-red-glow-sm:  rgba(232, 25, 44, 0.12);

  --color-white:        #FFFFFF;
  --color-white-90:     rgba(255,255,255,0.90);
  --color-white-65:     rgba(255,255,255,0.65);
  --color-white-38:     rgba(255,255,255,0.38);
  --color-white-12:     rgba(255,255,255,0.12);
  --color-white-06:     rgba(255,255,255,0.06);

  --color-border:       rgba(255,255,255,0.08);
  --color-border-red:   rgba(232,25,44,0.30);

  /* === GRADIENTS === */
  --gradient-red:   linear-gradient(135deg, #E8192C 0%, #8B0000 100%);
  --gradient-red-h: linear-gradient(90deg, #E8192C 0%, #FF4D5E 100%);
  --gradient-card:  linear-gradient(145deg, #18181F 0%, #0A0A0C 100%);

  /* === TYPOGRAPHY === */
  --font-display: 'Rajdhani', 'Barlow Condensed', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', sans-serif;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5.5rem;

  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.20em;

  /* === SPACING === */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;
  --space-4:  16px;  --space-5:  20px;  --space-6: 24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px;

  /* === RADIUS === */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* === SHADOW === */
  --shadow-card:    0 4px 32px rgba(0,0,0,0.60);
  --shadow-glow:    0 0 40px var(--color-red-glow);
  --shadow-glow-sm: 0 0 16px var(--color-red-glow-sm);

  /* === Z-INDEX === */
  --z-below:  -1;
  --z-base:    0;
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;

  /* === EASING & DURATION === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  160ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;

  /* === LAYOUT === */
  --container: 1200px;
  --container-narrow: 900px;
}