/* Design tokens — same system as money-pwa. The only place colors, spacing, radii and fonts live. */
:root {
  color-scheme: dark;

  --color-bg: #0e0f11;
  --color-surface: #17191c;
  --color-surface-2: #202328;
  --color-line: #2a2d33;
  --color-text: #eceae4;
  --color-muted: #8a8d93;
  --color-accent: #e8c77b;
  --color-on-accent: #17140c;
  --color-ok: #7fb89a;
  --color-danger: #e0675a;
  --color-rec: #e8846b;
  --color-scrim: rgb(0 0 0 / 0.6);

  /* categorical hues, validated in money-pwa (dark, surface #17191c) */
  --cat-1: #c97152;
  --cat-2: #297cae;
  --cat-3: #af8e2a;
  --cat-4: #875093;
  --cat-5: #44a781;
  --cat-6: #a03e43;
  --cat-7: #33a3b4;
  --cat-8: #597b31;
  --cat-9: #8678c9;
  --cat-10: #ad7130;

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Onest', -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 0.625rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.75rem;
  --radius-full: 999px;

  --tap: 2.75rem;
  --app-max: 30rem;
  --gutter: var(--space-4);
  --thumb: 4rem;

  --shadow-raise: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.45);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 360px) { :root { --gutter: var(--space-3); --thumb: 3.25rem; } }
@media (min-width: 480px) { :root { --gutter: var(--space-5); } }