/* ── 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 — matches work/health-checkup-report case study's teal (--cs-primary/--cs-primary-deep) */
body.theme-teal {
  --color-primary-100: #d1dee0;
  --color-primary-300: #8cadb1;
  --color-primary-500: #004952;
  --color-primary-700: #00424a;
  --color-primary-900: #003a43;
  --color-primary-500-10-on-white: #f0f4f5;
  --color-primary-500-20-on-white: #e0e9ea;
}

/* 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);
}

/* Health Blue theme (Agnos brand blue) — class has no hyphen: index.php derives
   it from form.json's `theme` field via preg_replace('/[^a-z]/', ...), which
   strips non-letters, so "health-blue" in form.json resolves to "theme-healthblue" */
body.theme-healthblue {
  --color-primary-100: var(--color-health-blue-100);
  --color-primary-300: var(--color-health-blue-300);
  --color-primary-500: var(--color-health-blue-500);
  --color-primary-700: var(--color-health-blue-700);
  --color-primary-900: var(--color-health-blue-900);
  --color-primary-500-05-on-white: var(--color-health-blue-500-05-on-white);
  --color-primary-500-10-on-white: var(--color-health-blue-500-10-on-white);
  --color-primary-500-20-on-white: var(--color-health-blue-500-20-on-white);

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