/* ==========================================================================
   ix7 game — "Crimson Pulse" design tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   ========================================================================== */

:root {
  /* --- Core palette ------------------------------------------------------ */
  --color-crimson-900: #4A0000;   /* deep shadow red */
  --color-crimson-800: #6B0004;
  --color-crimson-700: #8B0000;   /* dark red surfaces */
  --color-red-600: #D80027;       /* primary brand red */
  --color-red-500: #FF1E3C;       /* vibrant accent / CTA */
  --color-red-300: #FF7A8A;       /* soft highlight */
  --color-red-100: #FFE7EA;       /* red-tinted wash */
  --color-white: #FFFFFF;
  --color-off-white: #FAF7F7;
  --color-ink: #1A0E0E;           /* near-black text on white */
  --color-ink-plate: #060102;     /* matches the logo artwork backing */
  --color-border: rgba(216, 0, 39, 0.15);
  --color-border-strong: rgba(216, 0, 39, 0.32);

  /* Text roles. --color-muted is AA on white (4.9:1); --color-ink is AAA. */
  --color-muted: #6E5457;
  --color-muted-invert: rgba(255, 255, 255, 0.76);

  /* --- Surfaces ---------------------------------------------------------- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-off-white);
  --color-surface-dark: var(--color-crimson-900);

  /* --- Signature gradients -----------------------------------------------
     The fill gradient stops at --color-red-600, not --color-red-500: white
     14px bold text scores 5.32:1 on #D80027 but only 3.82:1 on #FF1E3C, which
     would fail WCAG AA. red-500 stays as the glow/accent colour, where it
     never carries text. */
  --grad-red: linear-gradient(115deg, var(--color-crimson-700) 0%, var(--color-red-600) 100%);
  --grad-dark: linear-gradient(150deg, #2A0000 0%, #0A0203 62%, #12000A 100%);
  --grad-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);

  /* --- Typography --------------------------------------------------------
     Sora / Poppins / Inter are named first so the site upgrades automatically
     if the brand webfonts are ever self-hosted. Until then the system stack
     renders with zero network cost and no layout shift. */
  --font-display: 'Sora', 'Poppins', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale (min → max across the 480–1440 viewport range) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  --fs-lg: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.95vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.3rem, 1.7rem + 2.7vw, 3.9rem);
  --fs-4xl: clamp(2.7rem, 1.75rem + 4.2vw, 5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.68;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.14em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --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;

  /* Vertical rhythm for full-bleed sections */
  --section-y: clamp(56px, 7vw, 116px);
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(16px, 4vw, 32px);

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Shadow / Glow ------------------------------------------------------ */
  --shadow-card: 0 8px 24px rgba(74, 0, 0, 0.12);
  --shadow-card-hover: 0 20px 48px rgba(74, 0, 0, 0.22);
  --shadow-glow-red: 0 0 32px rgba(255, 30, 60, 0.45);
  --shadow-header: 0 2px 24px rgba(74, 0, 0, 0.10);
  --ring-focus: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-red-500);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;

  /* --- Layering ----------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-float: 300;
  --z-modal: 400;

  /* --- Brand externals ---------------------------------------------------- */
  --color-telegram: #229ED9;
}

/* The site is intentionally light-only; this keeps browser dark-mode UA
   heuristics from washing out the crimson surfaces. */
:root { color-scheme: light; }