/* tokens.css — first-live UI tokens. Keep changes documented in the UI plan. */
:root {
  /* --- neutral foundation --- */
  --color-canvas: #FFFFFF;
  --color-cloud: #F8FAFD;
  --color-ink: #202124;
  --color-ash: #5F6368;
  --color-stone: #BDC1C6;
  --color-hairline: #DADCE0;
  /* --- action and trust accents --- */
  --color-terracotta: #1A73E8;
  --color-terracotta-deep: #1558B0;
  --color-aegean: #0B3D1D;
  /* --- color: destructive --- */
  --color-error: #D93025;
  --color-error-deep: #A50E0E;
  /* --- color: privacy UX --- */
  --color-unclaimed-surface: #FEF7E0;
  --color-unclaimed-text: #8A5A00;
  --color-mask-surface: var(--color-cloud);
  --color-mask-border: var(--color-terracotta);
  --color-mask-text: var(--color-ink);
  /* --- spacing --- */
  --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 --- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 14px;
  --radius-4: 20px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  /* --- shadow --- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(60,64,67,0.12), 0 1px 3px 1px rgba(60,64,67,0.08);
  --shadow-2: 0 1px 3px 0 rgba(60,64,67,0.18), 0 4px 8px 3px rgba(60,64,67,0.10);
  --focus-ring: 0 0 0 2px var(--color-terracotta);
  --focus-ring-accent: 0 0 0 2px var(--color-terracotta);
  /* --- typography --- */
  --font-family: "Inter", "Helvetica Neue", -apple-system, system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-size-display: 40px;
  --font-size-heading: 22px;
  --font-size-body: 16px;
  --font-size-caption: 13px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}