/* ============================================================
   IS7 GAME — "Crimson Pulse" Design Tokens
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Core surfaces ---- */
  --color-bg:            #0A0A0C;   /* near-black base, not pure black */
  --color-bg-alt:        #120708;   /* deep red-black gradient stop */
  --color-surface:       #17181C;
  --color-surface-2:     #1F1315;
  --color-surface-3:     #241417;
  --color-white:         #FFFFFF;
  --color-off-white:     #F5F3F2;

  /* ---- Red system ---- */
  --color-red-primary:   #E20A2E;   /* signature brand red */
  --color-red-bright:    #FF1F3D;   /* animated glow / hover */
  --color-red-deep:      #8C0621;   /* shadows, gradients */
  --color-red-soft:      rgba(226,10,46,0.12); /* tints, card backgrounds */
  --color-red-softer:    rgba(226,10,46,0.06);

  /* ---- Text ---- */
  --color-text-primary:  #FFFFFF;
  --color-text-secondary:#C9C6C6;
  --color-text-muted:    #7A7778;

  /* ---- Utility ---- */
  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.16);
  --color-success:       #21D07A;
  --color-warning:       #FFB020;
  --color-error:         #FF3B4E;
  --color-gold:          #F5C451;

  /* ---- Glow / shadow ---- */
  --shadow-glow-red:      0 0 24px rgba(226,10,46,0.45);
  --shadow-glow-strong:   0 0 48px rgba(255,31,61,0.55);
  --shadow-card:          0 8px 30px rgba(0,0,0,0.5);
  --shadow-card-hover:    0 16px 44px rgba(0,0,0,0.65);
  --shadow-inset:         inset 0 1px 0 rgba(255,255,255,0.05);

  /* ---- Gradients ---- */
  --gradient-hero:       radial-gradient(ellipse at top, #2B0810 0%, #0A0A0C 65%);
  --gradient-red-sweep:  linear-gradient(135deg, #E20A2E 0%, #8C0621 100%);
  --gradient-card-hover: linear-gradient(160deg, rgba(226,10,46,0.15), rgba(255,255,255,0.02));
  --gradient-energy:     linear-gradient(115deg, transparent 0%, rgba(226,10,46,0.18) 45%, rgba(255,31,61,0.05) 55%, transparent 100%);
  --gradient-text-red:   linear-gradient(120deg, #FFFFFF 0%, #FF6B7E 55%, #E20A2E 100%);

  /* ---- Typography ---- */
  --font-display: 'Rajdhani', 'Orbitron', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  --fs-hero:      clamp(2.6rem, 6vw, 5rem);
  --fs-h1:        clamp(2.1rem, 4.5vw, 3.4rem);
  --fs-h2:        clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:        clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h4:        clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body:      1rem;
  --fs-lg:        1.125rem;
  --fs-sm:        0.9rem;
  --fs-xs:        0.78rem;

  --lh-tight:     1.1;
  --lh-snug:      1.3;
  --lh-normal:    1.65;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius ---- */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container:      1240px;
  --container-narrow: 860px;
  --nav-height:     74px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.18s;
  --dur-mid:    0.32s;
  --dur-slow:   0.6s;

  --z-nav: 100;
  --z-menu: 200;
  --z-top: 300;
}