/* Waldart design tokens — pixel-sampled from Figma (Untitled UI system).
   Single source of truth for every design decision. See
   .planning/start-off/09-design-spec.md §9.1. */
:root {
  /* neutral (gray) 25..950 */
  --gray-25:#fdfdfd; --gray-50:#fafafa; --gray-100:#f5f5f5;
  --gray-200:#e9eaeb; --gray-300:#d5d7da; --gray-400:#a4a7ae;
  --gray-500:#717680; --gray-600:#535862; --gray-700:#414651;
  --gray-800:#252b37; --gray-900:#181d27; --gray-950:#0a0d12;
  /* brand green ("Moss") 25..950 */
  --green-25:#fafdf7; --green-50:#f5fbee; --green-100:#e6f4d7;
  --green-200:#ceeab0; --green-300:#acdc79; --green-400:#86cb3c;
  --green-500:#669f2a; --green-600:#4f7a21; --green-700:#3f621a;
  --green-800:#335015; --green-900:#2b4212; --green-950:#1a280b;
  /* error red */
  --red-50:#fef3f2; --red-300:#fda29b; --red-500:#f04438; --red-700:#b42318;
  /* warning amber */
  --amber-300:#fec84b; --amber-500:#f79009;

  /* semantic */
  --text-primary: var(--gray-900);
  --text-muted: var(--gray-500);
  --brand: var(--green-500);
  --brand-strong: var(--green-400);
  --surface: #ffffff;
  --surface-tint: var(--gray-50);
  --border: var(--gray-200);

  /* type scale (Figma: Heading 2xl..xs / Text xl..xs) */
  --font: "Outfit", "Century Gothic", system-ui, sans-serif;
  --h-2xl: clamp(2.2rem, 5vw, 3.5rem);
  --h-xl: clamp(1.9rem, 4vw, 2.75rem);
  --h-lg: clamp(1.6rem, 3vw, 2.25rem);
  --h-md: 1.625rem;
  --h-sm: 1.25rem;
  --h-xs: 1.0625rem;
  --t-xl: 1.25rem; --t-lg: 1.125rem; --t-md: 1rem; --t-sm: .875rem; --t-xs: .75rem;

  /* shape & space */
  --radius-pill: 999px;
  --radius: 12px;
  --space-1: .25rem; --space-2: .5rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;
  --container: 1280px;
  --shadow: 0 4px 16px rgba(10,13,18,.08);
}