:root {
  /* Brand reset: dark arcane/electric identity, replacing the earlier
     amber-based palette entirely per explicit direction - not a value
     tweak under an old name, the variables themselves are renamed so
     nothing still says --amber while meaning indigo/cyan. */
  --bg: #070812;
  --bg-raise: #0c0e1c;
  --surface: #101329;
  --surface-2: #171a38;
  --border: rgba(117, 103, 255, 0.16);
  --border-strong: rgba(117, 103, 255, 0.28);
  --ink: #f5f4ff;
  --ink-muted: #a5a8c0;
  --ink-faint: #63658a;

  --primary: #7567ff;       /* Arcane Indigo */
  --primary-ink: #f5f4ff;
  --primary-glow: rgba(117, 103, 255, 0.35);

  --accent: #42e8ff;        /* Mana Cyan - the energy accent */
  --accent-ink: #04262b;
  --accent-glow: rgba(66, 232, 255, 0.35);

  --violet: #b66cff;        /* Spectral Violet - secondary magic */

  --good: #69f0ae;          /* Mana Green */
  --warn: #e8c96a;          /* Soft Gold */
  --bad: #ff5d73;           /* Ember */

  /* Supporting spectral palette for card-color moments only - not
     used as UI chrome, per the brief's "the actual cards should
     provide the color explosion" instruction. */
  --yellow: #e8c96a;
  --purple: #7567ff;
  --pink: #b66cff;
  --green: #69f0ae;
  --blue: #42e8ff;
  --coral: #ff5d73;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Display: Anton - researched to match the logo's actual bold,
     condensed, athletic character (see typography-decision.md), not
     the earlier Cinzel/fantasy-serif direction. Free, SIL OFL,
     confirmed commercial-safe. No true italic exists for this font -
     forward-lean moments use a deliberate, sparing CSS skew instead
     of pretending this is an italic typeface.
     Body/UI: Inter, unchanged. Data face: JetBrains Mono, unchanged. */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", "SF Mono", monospace;

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  font-synthesis: weight;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; }

/* Deliberate, sparing forward-lean for specific brand moments - Anton
   has no true italic, so this is an honest CSS effect used only where
   called for, not a fake-italic applied blanket to every heading. */
.skew-forward { display: inline-block; transform: skewX(-8deg); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--accent-ink); }