@import "tailwindcss";

/* Design tokens from spec §7 (ported from tailwind.config.ts for Tailwind v4) */
@theme {
  --color-brand-50: #fdf3f8;
  --color-brand-100: #fdeaf3;
  --color-brand-200: #f6cfe2;
  --color-brand-500: #d6046e;
  --color-brand-600: #b0035a;
  --color-brand-700: #a30354;

  --color-surface: #f9f1f5;

  --color-border: #eedde6;
  --color-border-subtle: #f7e8ef;

  --color-ink: #2d1c26;
  --color-ink-body: #503b47;
  --color-ink-muted: #7a636f;

  --color-success-bg: #dff6dd;
  --color-success-text: #0e700e;

  --color-danger-bg: #fde7e9;
  --color-danger-text: #b10e1c;
  --color-danger-solid: #c50f1f;

  --color-warning-bg: #fff4ce;
  --color-warning-text: #835b00;

  --color-info-bg: #d7f0f0;
  --color-info-text: #00666d;

  --color-purple-bg: #f0ecf7;
  --color-purple-text: #5c2e91;

  --radius: 8px;

  --font-sans: var(--font-nunito), system-ui, sans-serif;
}

body {
  background-color: var(--color-surface);
  color: var(--color-ink);
}