/* AUTO-GENERATED by scripts/build-tokens.mjs — edit src/tokens/tokens.source.js instead. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/inter-300-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Audiowide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/audiowide-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/cinzel-decorative-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/philosopher-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MedievalSharp";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/medievalsharp-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/marcellus-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik Glitch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rubik-glitch-latin.woff2") format("woff2");
}

:root {
  /* ── Layer 1: primitives (--ref-*) ── */
  --ref-ink-0: #000;
  --ref-ink-990: #050505;
  --ref-ink-950: #0b0b0d;
  --ref-ink-900: #0f0f0f;
  --ref-ink-870: #141414;
  --ref-ink-850: #141418;
  --ref-ink-820: #1a1a22;
  --ref-ink-800: #1c1c26;
  --ref-white: #fff;
  --ref-gray-100: #f4f4f6;
  --ref-gray-150: #e8e8e8;
  --ref-gray-200: #dddddd;
  --ref-gray-300: #d6d6dd;
  --ref-gray-500: #8a8a96;
  --ref-gray-550: #80808e;
  --ref-gray-600: #888888;
  --ref-gray-700: #666666;
  --ref-gray-750: #555555;
  --ref-gray-800: #444444;
  --ref-slate-300: #aeb6c6;
  --ref-a-white-02: rgba(255, 255, 255, 0.02);
  --ref-a-white-03: rgba(255, 255, 255, 0.03);
  --ref-a-white-06: rgba(255, 255, 255, 0.06);
  --ref-a-white-08: rgba(255, 255, 255, 0.08);
  --ref-a-white-10: rgba(255, 255, 255, 0.1);
  --ref-a-white-12: rgba(255, 255, 255, 0.12);
  --ref-a-white-14: rgba(255, 255, 255, 0.14);
  --ref-a-white-15: rgba(255, 255, 255, 0.15);
  --ref-a-white-18: rgba(255, 255, 255, 0.18);
  --ref-a-white-25: rgba(255, 255, 255, 0.25);
  --ref-a-white-50: rgba(255, 255, 255, 0.5);
  --ref-a-white-55: rgba(255, 255, 255, 0.55);
  --ref-a-white-60: rgba(255, 255, 255, 0.6);
  --ref-a-white-82: rgba(255, 255, 255, 0.82);
  --ref-a-white-85: rgba(255, 255, 255, 0.85);
  --ref-a-white-88: rgba(255, 255, 255, 0.88);
  --ref-a-white-90: rgba(255, 255, 255, 0.9);
  --ref-a-black-22: rgba(0, 0, 0, 0.22);
  --ref-a-black-28: rgba(0, 0, 0, 0.28);
  --ref-a-black-40: rgba(0, 0, 0, 0.4);
  --ref-a-black-45: rgba(0, 0, 0, 0.45);
  --ref-a-black-55: rgba(0, 0, 0, 0.55);
  --ref-a-black-60: rgba(0, 0, 0, 0.6);
  --ref-a-black-72: rgba(0, 0, 0, 0.72);
  --ref-a-black-85: rgba(0, 0, 0, 0.85);
  --ref-header-bg: rgba(8, 8, 10, 0.82);
  --ref-gold-300: #e5c691;
  --ref-gold-500: #d8b24a;
  --ref-gold-700: #bc9c67;
  --ref-goldalt-500: #e0b24a;
  --ref-blue-500: #4e88e0;
  --ref-blue-700: #1f4aa8;
  --ref-violet-500: #a06ee8;
  --ref-amber-500: #e8963c;
  --ref-pink-500: #ff78b4;
  --ref-teal-500: #30e0d0;
  --ref-periwinkle-500: #8ea2ff;
  --ref-magenta-500: #ff77f2;
  --ref-faction-arcane: rgba(218, 165, 32, 0.85);
  --ref-faction-arcane-dim: rgba(218, 165, 32, 0.15);
  --ref-faction-science: rgba(0, 200, 220, 0.85);
  --ref-faction-science-dim: rgba(0, 200, 220, 0.15);
  --ref-faction-hunter: rgba(180, 40, 40, 0.85);
  --ref-faction-hunter-dim: rgba(180, 40, 40, 0.15);
  --ref-lb-bg-glow: #1a1c2a;
  --ref-lb-surface-border: #2c2c3a;
  --ref-lb-tile-edge: #2c2c3b;
  --ref-cta-ink: #14100a;
  --ref-rule: linear-gradient(to right, transparent 6%, rgba(255, 255, 255, 0.12) 50%, transparent 94%);
  --ref-grad-duels-hero: linear-gradient(180deg, #bc9c67 0%, #d4b582 28%, #e5c691 55%, #edd093 78%, #f1dead 100%);
  --ref-grad-lineby-hero: linear-gradient(180deg, #1f4aa8 0%, #2666d5 28%, #4e88e0 55%, #7cabea 78%, #aecff5 100%);
  --ref-grad-everywhen-hero: linear-gradient(180deg, #632bab 0%, #8042d7 28%, #a06ee8 55%, #be97f2 78%, #d8bdfa 100%);
  --ref-grad-adventure-hero: linear-gradient(180deg, #a55712 0%, #d87818 28%, #e8963c 55%, #f3b972 78%, #fad9a8 100%);
  --ref-grad-rockstar-hero: linear-gradient(180deg, #cf1773 0%, #f6318d 28%, #ff78b4 55%, #ffa3c9 78%, #ffc7db 100%);
  --ref-grad-worldwright-hero: linear-gradient(180deg, #a17317 0%, #ce9822 28%, #e0b24a 55%, #edcc78 78%, #f8e5aa 100%);
  --ref-grad-lb-tile-fill: linear-gradient(155deg, #2a508f 0%, #15294f 55%, #0f1d3a 100%);
  --ref-grad-instagram: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
  --ref-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --ref-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ref-font-brand: 'Audiowide', sans-serif;
  --ref-font-cinzel: 'Cinzel Decorative', serif;
  --ref-font-philosopher: 'Philosopher', serif;
  --ref-font-medievalsharp: 'MedievalSharp', cursive;
  --ref-font-marcellus: 'Marcellus', serif;
  --ref-font-rubik-glitch: 'Rubik Glitch', system-ui, sans-serif;
  --ref-font-serif: ui-serif, Georgia, 'Times New Roman', serif;
  --ref-fs-eyebrow: clamp(0.6rem, 0.9vw, 0.75rem);
  --ref-fs-caption: clamp(0.65rem, 0.9vw, 0.78rem);
  --ref-fs-sm: clamp(0.7rem, 1.05vw, 0.85rem);
  --ref-fs-body: clamp(0.85rem, 1.2vw, 1rem);
  --ref-fs-md: clamp(1rem, 1.5vw, 1.15rem);
  --ref-fs-lg: clamp(1rem, 2vw, 1.4rem);
  --ref-fs-h2: clamp(1.3rem, 3.5vw, 2.4rem);
  --ref-fs-h1: clamp(1.5rem, 3vw, 2.2rem);
  --ref-fs-hero: clamp(3rem, 9vw, 7rem);
  --ref-lh-tight: 1.1;
  --ref-lh-snug: 1.3;
  --ref-lh-body: 1.6;
  --ref-lh-loose: 1.72;
  --ref-track-tight: 0.01em;
  --ref-track-snug: 0.05em;
  --ref-track-body: 0.1em;
  --ref-track-wide: 0.16em;
  --ref-track-wider: 0.18em;
  --ref-track-brand: 0.22em;
  --ref-track-caps: 0.24em;
  --ref-space-1: 4px;
  --ref-space-2: 8px;
  --ref-space-3: 12px;
  --ref-space-4: 16px;
  --ref-space-5: 20px;
  --ref-space-6: 24px;
  --ref-space-7: 32px;
  --ref-space-8: 48px;
  --ref-space-9: 64px;
  --ref-space-10: 80px;
  --ref-space-12: 120px;
  --ref-space-section-x: clamp(24px, 6vw, 100px);
  --ref-radius-xs: 4px;
  --ref-radius-sm: 6px;
  --ref-radius-md: 8px;
  --ref-radius-lg: 10px;
  --ref-radius-xl: 12px;
  --ref-radius-2xl: 14px;
  --ref-radius-3xl: 16px;
  --ref-radius-pill: 999px;
  --ref-radius-circle: 50%;
  --ref-shadow-1: 0 2px 12px rgba(0, 0, 0, 0.4);
  --ref-shadow-icon: 0 4px 14px rgba(0, 0, 0, 0.4);
  --ref-shadow-cta: 0 10px 30px rgba(0, 0, 0, 0.28);
  --ref-shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.45);
  --ref-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);
  --ref-glow-white: 0 0 32px rgba(255, 255, 255, 0.25);
  --ref-dur-fast: 0.2s;
  --ref-dur-med: 0.25s;
  --ref-dur-slow: 0.5s;
  --ref-z-header: 15;
  --ref-z-modal: 1000;

  /* ── Layer 2: semantic roles ── */
  --bg: var(--ref-ink-950);
  --bg-canvas: var(--ref-ink-0);
  --panel: var(--ref-ink-850);
  --surface-alt: var(--ref-ink-800);
  --border: var(--ref-a-white-10);
  --border-soft: var(--ref-a-white-06);
  --text: var(--ref-a-white-88);
  --text-dim: var(--ref-a-white-50);
  --text-mute: var(--ref-a-white-55);
  --heading: var(--ref-white);
  --accent: var(--ref-gray-500);
  --accent-ink: var(--ref-cta-ink);
  --focus-ring: var(--ref-a-white-90);
  --focus-ring-w: 2px;
  --font-body: var(--ref-font-body);
  --font-brand: var(--ref-font-brand);

  /* ── Layer 3: component tokens ── */
  --btn-primary-shadow: var(--ref-shadow-cta);
  --btn-radius: var(--ref-radius-sm);
  --btn-pad-y: 14px;
  --btn-pad-x: 32px;
  --btn-track: var(--ref-track-wide);
  --btn-font: var(--ref-font-brand);
  --pill-bg: var(--ref-white);
  --pill-ink: var(--ref-ink-0);
  --pill-glow: var(--ref-glow-white);
  --chip-fg: var(--text-dim);
  --chip-border: var(--ref-a-white-15);
  --chip-radius: var(--ref-radius-xs);
  --chip-pad-y: 5px;
  --chip-pad-x: 14px;
  --card-bg: var(--panel);
  --card-border: var(--border);
  --card-radius: var(--ref-radius-3xl);
  --card-pad: 18px;
  --callout-bg: var(--panel);
  --callout-border: var(--border);
  --callout-radius: var(--ref-radius-lg);
  --modal-bg: var(--ref-ink-950);
  --modal-border: var(--ref-a-white-12);
  --modal-radius: var(--ref-radius-2xl);
  --modal-shadow: var(--ref-shadow-modal);
}

/* ── Layer 4: per-game brand themes ── */
[data-theme="duels"] {
  --accent: var(--ref-gold-500);
  --accent-soft: var(--ref-gold-300);
  --brand-display: var(--ref-font-cinzel);
  --brand-display-track: 0.06em;
  --brand-hero-grad: var(--ref-grad-duels-hero);
  --faction-1: var(--ref-faction-arcane);
  --faction-2: var(--ref-faction-science);
  --faction-3: var(--ref-faction-hunter);
}

[data-theme="lineby"] {
  --accent: var(--ref-blue-500);
  --brand-display: var(--ref-font-serif);
  --brand-display-track: 0;
  --brand-hero-grad: var(--ref-grad-lineby-hero);
}

[data-theme="everywhen"] {
  --accent: var(--ref-violet-500);
  --brand-display: var(--ref-font-philosopher);
  --brand-display-track: 0.1em;
  --brand-display-transform: uppercase;
  --brand-title-shadow: 0 0 4px rgba(168, 110, 240, 0.95), 0 0 16px rgba(168, 110, 240, 0.8), 0 0 42px rgba(168, 110, 240, 0.5);
  --brand-hero-grad: var(--ref-grad-everywhen-hero);
}

[data-theme="adventure"] {
  --accent: var(--ref-amber-500);
  --brand-display: var(--ref-font-medievalsharp);
  --brand-display-track: 0.01em;
  --brand-hero-grad: var(--ref-grad-adventure-hero);
}

[data-theme="rockstar"] {
  --accent: var(--ref-pink-500);
  --brand-display: var(--ref-font-rubik-glitch);
  --brand-display-track: 0.02em;
  --brand-hero-grad: var(--ref-grad-rockstar-hero);
}

[data-theme="worldwright"] {
  --accent: var(--ref-goldalt-500);
  --brand-display: var(--ref-font-marcellus);
  --brand-display-track: 0.04em;
  --brand-hero-grad: var(--ref-grad-worldwright-hero);
}

[data-theme="workshop"] {
  --accent: var(--ref-teal-500);
}

[data-theme="studio"] {
  --accent: var(--ref-periwinkle-500);
}

[data-theme="legal"] {
  --accent: var(--ref-slate-300);
}

[data-theme="contact"] {
  --accent: var(--ref-magenta-500);
}

[data-theme="journal"] {
  --accent: var(--ref-white);
}

/* ── Shared component classes (consumed by src/ui/kit/) ── */
/* Button — the CONVERGED primary CTA (accent-filled) + outline variant.
   Fill/border reference var(--accent) DIRECTLY so the ambient [data-theme]
   (or inline --accent) recolours the button (see the component-token note). */
.cta-btn {
  display: inline-block;
  margin-top: var(--ref-space-6);
  font-family: inherit;
  font-size: var(--ref-fs-sm);
  font-weight: 600;
  letter-spacing: var(--btn-track);
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--ref-dur-fast), background var(--ref-dur-med), color var(--ref-dur-med), box-shadow var(--ref-dur-fast), transform var(--ref-dur-fast);
}
.cta-btn:hover,
.cta-btn:focus-visible {
  filter: brightness(1.08);
  box-shadow: var(--btn-primary-shadow);
}
/* Flush variant — no standalone-hero top margin (for CTAs inside a flex/grid). */
.cta-btn--flush { margin-top: 0; }
/* Outline variant — transparent, fills the accent on hover (the old LearnMore). */
.cta-btn--outline {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}
.cta-btn--outline:hover,
.cta-btn--outline:focus-visible {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 0 28px var(--accent);
  filter: none;
}

/* Chip / badge — platform badges, tags. */
.chip {
  display: inline-block;
  font-size: var(--ref-fs-eyebrow);
  letter-spacing: var(--ref-track-wide);
  text-transform: uppercase;
  color: var(--chip-fg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  padding: var(--chip-pad-y) var(--chip-pad-x);
}

/* Card — generic surface. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
}

/* Callout — key-promise / notice box (moved from legal.css). */
.callout {
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--callout-radius);
  padding: var(--ref-space-5) var(--ref-space-6);
  margin: var(--ref-space-6) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--accent); }

/* ── Typography ──────────────────────────────────────────────────────────────
   The DEDICATED per-game type. .t-display / .t-title render in the ambient
   game's display face — they read --brand-display / --brand-display-track /
   --brand-title-shadow / --brand-display-transform DIRECTLY, so a [data-theme]
   subtree recolours + refaces them (Cinzel for Duels, Philosopher for Everywhen,
   MedievalSharp for Adventure, Rubik Glitch for Rockstar, Marcellus for
   Worldwright, serif for LineBy; falls back to the 0n1 Audiowide face off a
   game theme). */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--ref-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ref-track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.t-display {
  font-family: var(--brand-display, var(--ref-font-brand));
  font-size: var(--ref-fs-hero);
  letter-spacing: var(--brand-display-track, var(--ref-track-brand));
  line-height: var(--ref-lh-tight);
  text-transform: var(--brand-display-transform, none);
  text-shadow: var(--brand-title-shadow, none);
  color: var(--heading);
  margin: 0;
}
/* Accent-coloured title (the game's own colour). */
.t-display--accent { color: var(--accent); }
/* Gradient title — the game's hero gradient fill. Every GAME theme ships a
   --brand-hero-grad; the non-game themes fall back to their flat accent. */
.t-display--gradient {
  background: var(--brand-hero-grad, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
/* Section heading in the game's display face. */
.t-title {
  font-family: var(--brand-display, var(--ref-font-brand));
  font-size: var(--ref-fs-h2);
  letter-spacing: var(--brand-display-track, var(--ref-track-wide));
  line-height: var(--ref-lh-snug);
  color: var(--heading);
  margin: 0;
}
/* Studio heading — always the 0n1 Audiowide wordmark face, theme-independent. */
.t-heading {
  font-family: var(--font-brand);
  font-size: var(--ref-fs-h1);
  letter-spacing: var(--ref-track-wide);
  line-height: var(--ref-lh-snug);
  color: var(--heading);
  margin: 0;
}
.t-lead {
  font-family: var(--font-body);
  font-size: var(--ref-fs-lg);
  font-weight: 300;
  line-height: var(--ref-lh-body);
  color: var(--text);
  margin: 0;
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--ref-fs-body);
  line-height: var(--ref-lh-body);
  color: var(--text);
  margin: 0;
}
.t-body--dim { color: var(--text-dim); }

/* Divider — the Terminal horizon rule. */
.rule {
  width: 100%;
  max-width: 480px;
  height: 1px;
  border: 0;
  background: var(--ref-rule);
  margin: var(--ref-space-6) auto;
}