/* Design System Moku: tokens copied from its tokens.css (2026-09-18 version).
 * The @font-face rules are left out: Google Sans is not ours to redistribute, so
 * the font stacks fall back to system fonts where it is not installed. */
:root, [data-theme="default"] {
  --moku-coral: #ff7878;
  --moku-indigo: #5377f9;
  --moku-ink: #111111;
  --coral-50: #fff2f2;
  --coral-100: #fed5d5;
  --coral-200: #fdc1c1;
  --coral-300: #ffafaf;
  --coral-400: #ff7878;
  --coral-500: #f25c5c;
  --coral-600: #d94a4a;
  --indigo-50: #eef1fe;
  --indigo-100: #d6defd;
  --indigo-200: #b4c2fc;
  --indigo-300: #93a8fb;
  --indigo-400: #5377f9;
  --indigo-500: #3d5ee0;
  --indigo-600: #2f4bc2;
  --gray-900: #111111;
  --gray-800: #333333;
  --gray-700: #4f4f4f;
  --gray-500: #828282;
  --gray-400: #bdbdbd;
  --gray-300: #e0e0e0;
  --gray-200: #f2f2f2;
  --gray-100: #f7f7f8;
  --white: #ffffff;
  --border-lavender: #e9ebf8;
  --plate-lavender: #e6e8f7;
  --red: #eb5757;
  --orange: #f2994a;
  --yellow: #f2c94c;
  --green: #27ae60;
  --green-dark: #219653;
  --green-light: #6fcf97;
  --blue: #2f80ed;
  --blue-mid: #2d9cdb;
  --blue-light: #56ccf2;
  --purple: #9b51e0;
  --purple-light: #bb6bd9;
  --bg: var(--gray-100);
  --surface: var(--white);
  --surface-sunk: var(--coral-50);
  --fg-1: var(--moku-ink);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-on-accent: var(--white);
  --border: var(--border-lavender);
  --border-strong: var(--gray-300);
  --primary: var(--moku-coral);
  --primary-press: var(--coral-500);
  --accent: var(--moku-indigo);
  --accent-press: var(--indigo-500);
  --focus-ring: rgba(83, 119, 249, 0.35);
  --success: var(--green);
  --warning: var(--orange);
  --danger: var(--red);
  --info: var(--blue);
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06);
  --shadow-md: 0 3px 10px rgba(17,17,17,0.05);
  --shadow-lg: 0 6px 16px rgba(17,17,17,0.06);
  --shadow-coral: 0 3px 10px rgba(255,120,120,0.16);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xs: 3px;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.1em;
  --font-display: 'Google Sans', 'Google Sans Text', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* Varo tokens on top of Moku: the dark shades the prototype writes by hand,
   for text on tinted backgrounds that must keep 4.5:1. */
:root {
  --ink-danger: #8a1f1f;
  --ink-success: #1b6e3f;
  --ink-warning: #9a4d07;
  --link: var(--indigo-600);
}