/* ── Theme overrides ───────────────────────────────────────────────────────
   Override semantic --color-primary-* tokens per form.
   Components stay untouched — only the token values change.
   ────────────────────────────────────────────────────────────────────────── */

/* Default (blue) — no overrides needed, tokens.css already defines these */

/* Teal theme */
body.theme-teal {
  --color-primary-100: var(--color-teal-100);
  --color-primary-300: var(--color-teal-300);
  --color-primary-500: var(--color-teal-500);
  --color-primary-700: var(--color-teal-700);
  --color-primary-900: var(--color-teal-900);
  --color-primary-500-10-on-white: #e6faf8;
  --color-primary-500-20-on-white: #ccf5f0;
}

/* Orange theme */
body.theme-orange {
  --color-primary-100: var(--color-orange-100);
  --color-primary-300: var(--color-orange-300);
  --color-primary-500: var(--color-orange-500);
  --color-primary-700: var(--color-orange-700);
  --color-primary-900: var(--color-orange-900);
  --color-primary-500-10-on-white: #fff2e8;
  --color-primary-500-20-on-white: #ffe0c7;
}

/* Violet theme */
body.theme-violet {
  --color-primary-100: var(--color-violet-100);
  --color-primary-300: var(--color-violet-300);
  --color-primary-500: var(--color-violet-500);
  --color-primary-700: var(--color-violet-700);
  --color-primary-900: var(--color-violet-900);
  --color-primary-500-05-on-white: var(--color-violet-500-05-on-white);
  --color-primary-500-10-on-white: var(--color-violet-500-10-on-white);
  --color-primary-500-20-on-white: var(--color-violet-500-20-on-white);

  --color-secondary-100: var(--color-indigo-100);
  --color-secondary-300: var(--color-indigo-300);
  --color-secondary-500: var(--color-indigo-500);
  --color-secondary-700: var(--color-indigo-700);
  --color-secondary-900: var(--color-indigo-900);
}