/* ─── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  --max-width: 1100px;

  /* ── Typography ── */
  --font-family: 'Roboto', sans-serif;
  --font-family-mono: 'Roboto Mono', 'Monaco', 'Courier New', monospace;

  /* ── Font weights ── */
  --font-weight-normal: 400;
  --font-weight-mid: 500;
  --font-weight-strong: 700;
  /* aliases for semantic clarity */
  --font-weight-h1: var(--font-weight-normal);
  --font-weight-btn: var(--font-weight-strong);
  --font-weight-label: var(--font-weight-strong);

  /* ── Uppercase text ── */
  --text-transform-btn: uppercase;
  --letter-spacing-btn: 0.08em;
  --letter-spacing-label: 0.06em;

  /* ── Font size scale ──
     xs:       0.7rem  — badges, tiny labels, key annotations
     sm:       0.8rem  — secondary text, meta, captions
     body/btn: 0.9rem  — primary content, buttons, inputs
     label:    0.75rem — uppercase section labels, field labels
     md:       1rem    — section headings, subtitles
     lg:       1.2rem  — card headings, modal titles
     h1:       1.75rem — page title
  */
  --font-size-h1: 1.75rem;
  --font-size-lg: 1.2rem;
  --font-size-md: 1rem;
  --font-size-body: 0.9rem;
  --font-size-btn: 0.9rem;
  --font-size-subtitle: var(--font-size-md);
  --font-size-label: 0.75rem;
  --font-size-sm: 0.8rem;
  --font-size-xs: 0.7rem;

  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #252525;
  --border: #2a2a2a;
  --border-hi: #3a3a3a;
  --text: #e8e4df;
  --text-dim: #6b6560;
  --text-mid: #9a9490;
  --accent: #c44b2b;
  --accent-hi: #d9603a;
  --accent-glow: rgba(196, 75, 43, 0.3);
  --green: #3a8a5c;
  --green-dim: rgba(58, 138, 92, 0.12);
  --green-glow: rgba(58, 138, 92, 0.3);
  --red: #c44040;
  --red-dim: rgba(196, 64, 64, 0.12);
  --blue: #3b8fd4;
  --blue-dim: rgba(59, 143, 212, 0.12);
  --amber: #b8860b;
  --amber-hi: #c8860a;
  --gold: #f59e0b;
  --white: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
}

/* ─── Reset ────────────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Base Body ────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Page Container ───────────────────────────────────────────────────────── */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  width: 100%;
}

/* ─── Shared Keyframes ─────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}