/* Design tokens — the only place for colors, fonts and spacing. Swap for the studio brand here. */
:root {
  color-scheme: dark;

  /* Palette: warm black, bone white, flash red, old gold. */
  --c-bg: #0f0d0c;
  --c-surface: #1a1715;
  --c-surface-2: #24201d;
  --c-surface-3: #2f2a26;
  --c-line: #3a332d;
  --c-text: #f2ebe1;
  --c-muted: #a39a8f;
  --c-faint: #6f675e;
  --c-accent: #d7263d;
  --c-accent-ink: #ffffff;
  --c-gold: #e8b04a;
  --c-plus: #5cc98f;
  --c-minus: #ff6b6b;
  --c-warn: #f2b134;
  --c-qr-bg: #ffffff;
  --c-scrim: rgb(8 6 5 / 82%);

  /* Rarity: color of the frame, glow and particles. */
  --rarity-common: #c9c0b4;
  --rarity-rare: #3fa7d6;
  --rarity-epic: #b06ef0;
  --rarity-legendary: #f2b134;

  /* Type. Headings: condensed caps (flash lettering); body: system UI. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oswald", "Roboto Condensed", "Arial Narrow", "Avenir Next Condensed", Impact,
    var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-hero: 3.25rem;
  --tracking-display: 0.06em;

  /* Spacing, radii, shadows. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgb(0 0 0 / 45%);
  --border: 1px solid var(--c-line);

  /* Layout. */
  --app-max: 520px;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Motion. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-med: 300ms;
}