:root {
  /* Green — WhatsApp-green brand ramp, --green-600 is the exact brand hex */
  --green-900: oklch(18% 0.05 149);
  --green-800: oklch(26% 0.07 149);
  --green-700: oklch(35% 0.1 149);
  --green-600: #25d366;  /* primary — WhatsApp green */
  --green-500: oklch(84% 0.15 150);
  --green-400: oklch(89% 0.11 151);
  --green-300: oklch(93% 0.08 151);
  --green-200: oklch(95.5% 0.05 151);
  --green-100: oklch(97.5% 0.03 151);
  --green-050: oklch(99% 0.012 151);

  /* Neutral — ink ramp, faint green undertone for cohesion */
  --gray-900: oklch(19% 0.012 155);
  --gray-800: oklch(29% 0.012 155);
  --gray-700: oklch(39% 0.011 155);
  --gray-600: oklch(49% 0.01 155);
  --gray-500: oklch(59% 0.009 155);
  --gray-400: oklch(70% 0.008 155);
  --gray-300: oklch(80% 0.006 155);
  --gray-200: oklch(89% 0.005 155);
  --gray-100: oklch(94% 0.004 155);
  --gray-050: oklch(97.5% 0.003 155);
  --white: #ffffff;

  /* Error — the one functional exception to green/white, kept muted and desaturated */
  --red-600: oklch(52% 0.1 25);
  --red-100: oklch(95% 0.015 25);

  /* Semantic aliases — build with these, not raw ramp steps */
  --bg-page: var(--white);
  --bg-surface: var(--white);
  --bg-surface-sunken: var(--gray-050);
  --bg-inverse: var(--gray-900);

  --surface-brand: var(--green-600);
  --surface-brand-hover: var(--green-700);
  --surface-brand-active: var(--green-800);
  --surface-brand-subtle: var(--green-050);
  --surface-brand-subtle-hover: var(--green-100);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --text-on-brand: var(--white);
  --text-brand: var(--green-700);
  --text-inverse: var(--white);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand: var(--green-600);
  --focus-ring: var(--green-400);

  --text-error: var(--red-600);
  --surface-error-subtle: var(--red-100);
  --border-error: var(--red-600);

  --text-success: var(--green-700);
  --surface-success-subtle: var(--green-050);
  --border-success: var(--green-600);
}