@layer tokens, base, components, shell, adventure, views, responsive;

@layer tokens {
  :root {
    color-scheme: dark;
    --background: #0b1020;
    --background-soft: #11182b;
    --surface: rgba(20, 29, 49, 0.92);
    --surface-elevated: #17223a;
    --surface-soft: rgba(157, 174, 207, 0.045);
    --border: rgba(157, 174, 207, 0.16);
    --border-strong: rgba(157, 174, 207, 0.3);
    --text: #eef2ff;
    --muted: #a5b2ca;
    --faint: #8492ad;
    --accent: #f0bd69;
    --accent-soft: rgba(240, 189, 105, 0.14);
    --success: #74d2c2;
    --warning: #f3c775;
    --danger: #f28b8b;
    --focus: #8ae2d3;
    --radius-small: 8px;
    --radius-medium: 13px;
    --radius-large: 18px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --shadow-panel: 0 20px 55px rgba(0, 0, 0, 0.32);
    --content-width: 1120px;
    --reading-width: 780px;
    --topbar-height: 64px;
    --bottom-nav-height: 64px;
    --bg: var(--background);
    --bg-soft: var(--background-soft);
    --panel: var(--surface);
    --panel-strong: var(--surface-elevated);
    --line: var(--border);
    --line-strong: var(--border-strong);
    --gold: var(--accent);
    --gold-soft: var(--accent-soft);
    --teal: var(--success);
    --red: var(--danger);
    --shadow: var(--shadow-panel);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
  }
}