/* Design tokens (docs/04-ux-ui.md §1). One typeface, one accent, semantic status colors. */
:root {
  --font-sans: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Neutrals */
  --gray-0: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #475569;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Accent (the only one) */
  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-soft: #ccfbf1;
  --accent-tint: #e3f1ee; /* soft discs and background shapes on auth/hero screens */
  --accent-tint-strong: #bfe3dc;

  /* Semantic */
  --safe: #15803d;
  --safe-soft: #dcfce7;
  --lost: #b91c1c;
  --lost-soft: #fee2e2;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --inactive: #64748b;
  --inactive-soft: #e2e8f0;

  /* Surfaces */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);

  /* Spacing and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-card: 0 8px 24px rgb(15 23 42 / 0.06);

  --touch-min: 48px;
  --cta-height: 56px;
  --content-max: 720px;
  --content-narrow: 480px;
  --content-wide: 1100px;
}