/* ==========================================================================
   IC7 Game — Design Tokens
   Single source of truth for colour, type, space, motion and elevation.
   ========================================================================== */

:root {
  /* ---- Core palette -------------------------------------------------- */
  --color-bg:              #0A0A0C;
  --color-bg-elevated:     #121214;
  --color-surface:         #17171A;
  --color-surface-2:       #1F1F23;
  --color-accent:          #E10E1E;
  --color-accent-bright:   #FF1F32;
  --color-accent-deep:     #8C0A15;
  --color-white:           #FFFFFF;
  --color-text-secondary:  #B8B8BE;
  --color-text-muted:      #6E6E76;
  --color-border:          #262629;
  --color-border-strong:   #34343A;
  --color-success:         #22C55E;
  --color-warning:         #FFB020;

  /* ---- Typography ---------------------------------------------------- */
  --font-display: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body:    'Manrope', 'Inter', 'Segoe UI', sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 0.35vw + 0.98rem, 1.125rem);
  --fs-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --fs-2xl:  clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 3.4vw + 1.4rem, 4rem);
  --fs-4xl:  clamp(2.75rem, 5vw + 1.4rem, 5.25rem);

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --tracking-display: 0.02em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.16em;

  /* ---- Spacing scale (4px base) -------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y:   clamp(3.5rem, 7vw, 7rem);
  --container:   1240px;
  --container-narrow: 820px;
  --gutter:      clamp(1.125rem, 4vw, 2.5rem);

  /* ---- Gradients ----------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, #E10E1E 0%, #8C0A15 60%, #0A0A0C 100%);
  --gradient-glow:    radial-gradient(circle at 50% 0%, rgba(225, 14, 30, 0.35), transparent 60%);
  --gradient-btn:     linear-gradient(135deg, #FF1F32 0%, #E10E1E 45%, #8C0A15 100%);
  --gradient-surface: linear-gradient(160deg, #1F1F23 0%, #121214 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(225, 14, 30, 0.6), transparent);
  --gradient-text:    linear-gradient(180deg, #FFFFFF 25%, #B8B8BE 100%);

  /* ---- Elevation / glow ---------------------------------------------- */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:  0 18px 48px rgba(0, 0, 0, 0.66);
  --shadow-glow-red:    0 0 30px rgba(225, 14, 30, 0.35);
  --shadow-glow-strong: 0 0 60px rgba(255, 31, 50, 0.5);
  --shadow-inset-top:   inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Radii ---------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion --------------------------------------------------------- */
  --transition-fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   520ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layering ------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 300;
}

/* Users who prefer less motion get an instant, static experience. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   1ms;
    --transition-normal: 1ms;
    --transition-slow:   1ms;
  }
}