/* Digital Underground design tokens. See /docs/DESIGN-RULES.md. Not for Kerzy Labs games. */
:root {
  color-scheme: dark;
  /* Palette (brand gradient #6d28d9 -> #1e3a8a on near-black) */
  --du-bg: #07060f;
  --du-surface: rgba(16, 12, 28, .92);
  --du-surface-2: #120e22;
  --du-text: #f5f3ff;
  --du-muted: #c8c0da;
  --du-accent: #bfe8ff;          /* links, focus, active states */
  --du-accent-violet: #a78bfa;   /* bullets, small highlights only */
  --du-brand-1: #6d28d9;
  --du-brand-2: #1e3a8a;
  --du-gradient: linear-gradient(105deg, var(--du-brand-1), var(--du-brand-2));
  --du-border: rgba(255, 255, 255, .12);
  --du-border-strong: rgba(191, 232, 255, .55);
  --du-success: #6ee7b7;

  /* Fonts: no downloads. Display uses Inter if the device has it. */
  --du-font-display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --du-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (fixed steps) */
  --du-fs-xs: 12px;
  --du-fs-sm: 14px;
  --du-fs-md: 16px;
  --du-fs-lg: 18px;
  --du-fs-xl: 22px;
  --du-fs-2xl: 30px;
  --du-fs-3xl: clamp(36px, 7vw, 48px);
  --du-fs-4xl: clamp(40px, 9vw, 64px);
  --du-lh-tight: 1.05;
  --du-lh-body: 1.55;

  /* Spacing scale (4px base) */
  --du-sp-1: 4px; --du-sp-2: 8px; --du-sp-3: 12px; --du-sp-4: 16px;
  --du-sp-5: 24px; --du-sp-6: 32px; --du-sp-7: 48px; --du-sp-8: 64px;

  /* Radius */
  --du-r-sm: 10px; --du-r-md: 14px; --du-r-lg: 20px; --du-r-pill: 999px;

  /* Tap target */
  --du-tap: 48px;
}

/* Buttons */
.du-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--du-sp-2);
  min-height: var(--du-tap); padding: 0 var(--du-sp-5); border-radius: var(--du-r-pill);
  font: 700 var(--du-fs-md)/1.2 var(--du-font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
}
.du-btn--primary { background: var(--du-gradient); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(49,20,120,.35); }
.du-btn--secondary { background: rgba(6, 4, 17, .55); color: var(--du-text); border-color: var(--du-border-strong); }
.du-btn--secondary:hover { border-color: var(--du-accent); background: rgba(109, 40, 217, .35); }
.du-btn--small { min-height: var(--du-tap); padding: 0 var(--du-sp-4); font-size: var(--du-fs-sm); }
.du-btn:focus-visible { outline: 2px solid var(--du-accent); outline-offset: 3px; }

/* Select */
.du-select {
  appearance: none; -webkit-appearance: none;
  min-height: var(--du-tap); padding: 0 44px 0 var(--du-sp-4);
  border-radius: var(--du-r-md); border: 1px solid var(--du-border-strong);
  background: var(--du-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23bfe8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--du-text); font: 600 var(--du-fs-md)/1.2 var(--du-font-body); cursor: pointer;
}
.du-select:focus-visible { outline: 2px solid var(--du-accent); outline-offset: 2px; }
.du-select option { background: var(--du-surface-2); color: var(--du-text); }
h1, h2, h3 { font-family: var(--du-font-display); }