/* ============================================================
   Boss Mana — Design Tokens
   Direction: dark luxury / art-deco gaming empire
   ============================================================ */

:root {
  /* --- Surfaces (warm obsidian) --- */
  --color-void: oklch(13% 0.012 70);
  --color-bg: oklch(16% 0.014 68);
  --color-surface: oklch(19.5% 0.016 66);
  --color-surface-2: oklch(23% 0.018 64);
  --color-line: oklch(40% 0.03 72 / 0.34);
  --color-line-soft: oklch(62% 0.035 78 / 0.1);

  /* --- Gold (refined accent — used sparingly) --- */
  --gold-1: oklch(90% 0.065 92);
  --gold-2: oklch(80% 0.1 84);
  --gold-3: oklch(70% 0.11 76);
  --gold-deep: oklch(54% 0.1 66);
  --gold-line: oklch(74% 0.1 80 / 0.42);
  --gold-glow: oklch(78% 0.13 80 / 0.32);
  --grad-gold: linear-gradient(120deg, var(--gold-1), var(--gold-2) 48%, var(--gold-deep));
  --grad-gold-soft: linear-gradient(120deg, var(--gold-2), var(--gold-deep));

  /* --- Jade (mana energy) --- */
  --jade: oklch(72% 0.13 165);
  --jade-deep: oklch(52% 0.11 168);
  --jade-glow: oklch(70% 0.15 168 / 0.4);

  /* --- Crimson (alert / sports) --- */
  --crimson: oklch(58% 0.2 22);

  /* --- Text --- */
  --text: oklch(95% 0.012 85);
  --text-soft: oklch(82% 0.015 82);
  --text-muted: oklch(66% 0.018 80);
  --text-faint: oklch(52% 0.02 78);
  --on-gold: oklch(18% 0.03 70);

  /* --- Type --- */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Sora", system-ui, sans-serif;

  --text-xs: 0.74rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --text-lg: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --text-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --text-h2: clamp(1.8rem, 1.35rem + 2vw, 2.9rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);

  --tracking-tight: -0.018em;
  --tracking-wide: 0.16em;
  --tracking-wider: 0.34em;

  /* --- Spacing --- */
  --space-section: clamp(2.75rem, 2.2rem + 2.5vw, 4.5rem);
  --shell-max: 1200px;
  --shell-pad: clamp(1.3rem, 0.7rem + 3vw, 3rem);

  /* --- Radius / depth --- */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 12px;
  --shadow-soft: 0 1px 0 oklch(100% 0 0 / 0.03) inset, 0 20px 50px -32px oklch(0% 0 0 / 0.7);
  --shadow-card: 0 30px 70px -40px oklch(0% 0 0 / 0.85);
  --shadow-gold: 0 16px 44px -24px var(--gold-glow);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}