/* ============================================================
   GameCraft Incorporated — Design Tokens
   Dark premium interactive-entertainment aesthetic.
   ============================================================ */

:root {
  /* --- Core palette (bright / light theme) --- */
  --color-ink-deep: oklch(99% 0.003 330);    /* page background (near white) */
  --color-ink: oklch(96.6% 0.007 340);       /* alt sections / stats / footer (soft tint) */
  --color-surface: oklch(100% 0 0);          /* cards (white) */
  --color-surface-2: oklch(97.6% 0.006 340); /* elevated / hover */
  --color-line: oklch(24% 0.03 330 / 0.12);  /* hairline borders */
  --color-line-strong: oklch(24% 0.03 330 / 0.22);

  --color-text: oklch(23% 0.03 330);         /* near-black ink (warm) */
  --color-text-soft: oklch(43% 0.025 330);   /* secondary */
  --color-text-mute: oklch(56% 0.02 330);    /* muted captions */

  /* On dark image/overlay bands (hero, showcase card, banner) */
  --color-on-dark: oklch(98% 0 0);
  --color-on-dark-soft: oklch(85% 0.012 330);

  /* --- Brand accents (tuned for contrast on white) --- */
  --color-magenta: oklch(60% 0.24 6);        /* hot pink-red */
  --color-magenta-bright: oklch(57% 0.25 9); /* deeper so it reads on white */
  --color-red: oklch(54% 0.23 25);           /* crimson */
  --color-gold: oklch(70% 0.15 72);          /* amber-gold (contrast on white) */

  /* --- Gradients --- */
  --grad-brand: linear-gradient(120deg, var(--color-magenta) 0%, var(--color-red) 100%);
  --grad-brand-soft: linear-gradient(120deg, oklch(64% 0.24 5 / 0.12), oklch(56% 0.23 25 / 0.08));
  /* On light surfaces: brand-coloured heading gradient */
  --grad-text: linear-gradient(100deg, var(--color-text) 0%, var(--color-magenta) 55%, var(--color-red) 100%);
  /* On dark bands: bright heading gradient */
  --grad-text-on-dark: linear-gradient(100deg, #fff 0%, #ffd5e0 38%, var(--color-magenta) 72%, var(--color-gold) 100%);
  --glow-magenta: 0 0 0.5px var(--color-magenta), 0 8px 40px oklch(60% 0.24 6 / 0.35);

  /* --- Typography --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.75rem, 1rem + 9vw, 8.5rem);

  --tracking-tight: -0.03em;
  --tracking-label: 0.22em;

  /* --- Spacing & rhythm --- */
  --space-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --max-w: 1280px;

  /* --- Radii --- */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layering --- */
  --z-nav: 100;
  --z-overlay: 200;
}