/* ═══════════════════════════════════════════════════════════════
   TOKENS — the single source of truth for the whole layout.
   Nothing below this file should hard-code a colour, a radius,
   a duration or a step of the type scale.
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Raw palette ─────────────────────────────────────────── */
  --void-950: #04050a;
  --void-900: #070912;
  --void-850: #0a0d1a;
  --void-800: #0e1222;
  --void-750: #131829;
  --void-700: #181e33;
  --void-600: #212842;
  --void-500: #2c3455;
  --steel-400: #3d4870;
  --steel-300: #5e6b95;
  --mist-300: #8a95b8;
  --mist-200: #aeb8d4;
  --mist-100: #d5dbec;
  --parchment: #f4efe3;

  --ember-700: #7d1608;
  --ember-600: #b32610;
  --ember-500: #e8391a;
  --ember-400: #ff5f2e;
  --ember-300: #ff9159;

  --gold-600: #9d6c1b;
  --gold-500: #cf9a38;
  --gold-400: #f0c26a;
  --gold-300: #ffe2a8;

  --arcane-500: #6f3dff;
  --arcane-400: #9a73ff;
  --mana-500: #1fbfc9;
  --mana-400: #58e0e6;
  --venom-400: #79dd63;
  --blood-400: #ff4f6e;
  --frost-400: #4da2ff;

  /* ── Semantic surfaces ───────────────────────────────────── */
  --bg: var(--void-950);
  --bg-alt: var(--void-900);
  --surface: rgba(14, 18, 34, 0.88);
  --surface-2: rgba(19, 24, 41, 0.92);
  --surface-solid: var(--void-850);
  --line: rgba(61, 72, 112, 0.42);
  --line-soft: rgba(61, 72, 112, 0.24);
  --line-strong: rgba(207, 154, 56, 0.46);

  /* ── Semantic text ───────────────────────────────────────── */
  --text: var(--mist-100);
  --text-dim: var(--mist-200);
  --text-mute: var(--mist-300);
  --text-hi: var(--parchment);

  /* ── Brand roles ─────────────────────────────────────────── */
  --accent: var(--ember-500);
  --accent-hi: var(--ember-400);
  --accent-ink: #fff4ef;
  --gold: var(--gold-400);
  --focus: var(--gold-300);

  /* ── Rarity scale (drives cards, ranks, tags) ────────────── */
  --rarity-common: var(--steel-300);
  --rarity-rare: var(--frost-400);
  --rarity-epic: var(--arcane-400);
  --rarity-legend: var(--gold-400);
  --rarity-mythic: var(--ember-400);
  --rarity: var(--rarity-common); /* per-component override */

  /* ── Gradients & atmospherics ────────────────────────────── */
  --grad-ember: linear-gradient(135deg, var(--ember-400) 0%, var(--ember-600) 55%, var(--ember-700) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 48%, var(--gold-600) 100%);
  --grad-title: linear-gradient(100deg, var(--gold-300) 0%, var(--gold-400) 34%, var(--ember-400) 78%, var(--ember-300) 100%);
    --grad-edge: linear-gradient(150deg,
      rgba(240, 194, 106, 0.44) 0%,
      rgba(61, 72, 112, 0.30) 30%,
      rgba(33, 40, 66, 0.10) 62%,
      var(--rarity) 100%);
    --grad-panel: linear-gradient(168deg, rgba(19, 24, 41, 0.96) 0%, rgba(7, 9, 18, 0.96) 100%);
    --glow-accent: 0 0 0 1px rgba(232, 57, 26, 0.34), 0 14px 40px -16px rgba(232, 57, 26, 0.60);
    --glow-rarity: 0 0 0 1px rgba(240, 194, 106, 0.42), 0 18px 44px -20px rgba(240, 194, 106, 0.58);

  /* film grain, drawn once and reused by every atmospheric layer */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  /* ── Elevation & glow ────────────────────────────────────── */
  --sh-1: 0 1px 2px rgb(0 0 0 / .5);
  --sh-2: 0 6px 18px -8px rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .04) inset;
  --sh-3: 0 22px 48px -24px rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .05) inset;
  /* ── Type ────────────────────────────────────────────────── */
  --font-display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;

  /* mobile-anchored fluid scale: the min is the phone value */
  --fs-50:  0.6875rem;                          /* 11 — micro labels     */
  --fs-100: 0.75rem;                            /* 12 — eyebrows         */
  --fs-200: 0.8125rem;                          /* 13 — meta             */
  --fs-300: 0.875rem;                           /* 14 — small body       */
  --fs-400: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* body       */
  --fs-500: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);       /* lede       */
  --fs-600: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);       /* card title */
  --fs-700: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);       /* h2         */
  --fs-800: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);           /* big h2     */
  --fs-900: clamp(2.375rem, 1.3rem + 7.4vw, 6rem);         /* hero       */

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --ls-wide: 0.18em;
  --ls-wider: 0.3em;

  /* ── Space (mobile first; the fluid ones grow with viewport) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 7.5rem);
  --stack: clamp(1.75rem, 4vw, 3rem);

  /* ── Shape ───────────────────────────────────────────────── */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 999px;
  --notch: 14px;           /* the RPG corner cut, used by --cut */
  --cut: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  --cut-both: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 720ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --maxw: 78rem;
  --maxw-narrow: 52rem;
  --header-h: 60px;

  /* ── Depth ───────────────────────────────────────────────── */
  --z-art: 0;
  --z-raise: 1;
  --z-scrim: 60;
  --z-nav: 70;
  --z-header: 80;
  --z-skip: 100;
}

/* Custom-property values are not validated until use, so these must be
   isolated from the compatible token values above. */
@supports (color: color-mix(in oklab, black, white)) {
  :root {
    --surface: color-mix(in oklab, var(--void-800) 88%, transparent);
    --surface-2: color-mix(in oklab, var(--void-750) 92%, transparent);
    --line: color-mix(in oklab, var(--steel-400) 42%, transparent);
    --line-soft: color-mix(in oklab, var(--steel-400) 24%, transparent);
    --line-strong: color-mix(in oklab, var(--gold-500) 46%, transparent);
    --grad-edge: linear-gradient(150deg, color-mix(in oklab, var(--gold-400) 44%, transparent) 0%, color-mix(in oklab, var(--steel-400) 30%, transparent) 30%, color-mix(in oklab, var(--void-600) 10%, transparent) 62%, color-mix(in oklab, var(--rarity) 40%, transparent) 100%);
    --grad-panel: linear-gradient(168deg, color-mix(in oklab, var(--void-750) 96%, transparent) 0%, color-mix(in oklab, var(--void-900) 96%, transparent) 100%);
    --glow-accent: 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent), 0 14px 40px -16px color-mix(in oklab, var(--accent) 60%, transparent);
    --glow-rarity: 0 0 0 1px color-mix(in oklab, var(--rarity) 42%, transparent), 0 18px 44px -20px color-mix(in oklab, var(--rarity) 58%, transparent);
  }
}

@media (min-width: 64rem) {
  :root { --header-h: 72px; }
}

/* Rarity is a token, so one attribute re-skins an entire component. */
[data-rarity="common"]  { --rarity: var(--rarity-common); }
[data-rarity="rare"]    { --rarity: var(--rarity-rare); }
[data-rarity="epic"]    { --rarity: var(--rarity-epic); }
[data-rarity="legend"]  { --rarity: var(--rarity-legend); }
[data-rarity="mythic"]  { --rarity: var(--rarity-mythic); }