/* Semantic roles. Components reference THESE, never a raw scale step — which is what
   makes dark mode and per-tenant white-label cost nothing per component. */
:root{
  color-scheme:light;

  --surface-page:var(--color-neutral-0);
  --surface-raised:var(--color-neutral-50);
  --surface-border:var(--color-neutral-200);

  --text-strong:var(--color-neutral-900);
  --text-body:var(--color-neutral-700);
  --text-muted:var(--color-neutral-500);
  --text-link:var(--color-primary-600);
  --text-negative:var(--color-danger-700);
  --text-on-accent:var(--color-neutral-0);

  --surface-action:var(--color-primary-600);
  --surface-action-hover:var(--color-primary-700);
  --text-on-action:var(--color-neutral-0);

  --surface-destructive:var(--color-danger-500);
  --surface-destructive-hover:var(--color-danger-700);
  --text-on-destructive:var(--color-neutral-0);

  /* Its own role, not the action colour: an outline is drawn ON what sits behind it,
     and on a dark card the button blue scored 2.58 — under WCAG 1.4.11's 3:1. */
  --focus-ring:var(--color-primary-600);

  /* States come in pairs — the tint a pill sits on, and the label that reads on it. */
  --state-positive-surface:var(--color-success-100);
  --state-positive-text:var(--color-success-700);
  --state-caution-surface:var(--color-warning-100);
  --state-caution-text:var(--color-warning-700);
  --state-negative-surface:var(--color-danger-100);
  --state-negative-text:var(--color-danger-700);
  --state-informative-surface:var(--color-info-100);
  --state-informative-text:var(--color-info-700);
}

/* Dark re-points the roles only — the scales never change. Not scoped to :root, so one
   document can hold both: a dark landing page with a light app inside it. */
[data-theme='dark']{
  color-scheme:dark;
  --surface-page:var(--color-neutral-900);
  --surface-raised:var(--color-neutral-800);
  --surface-border:var(--color-neutral-700);
  --text-strong:var(--color-neutral-0);
  --text-body:var(--color-neutral-200);
  --text-muted:var(--color-neutral-400);
  --text-link:var(--color-primary-300);
  --focus-ring:var(--color-primary-400);
  --text-negative:var(--color-danger-300);
  --state-positive-surface:var(--color-success-900);
  --state-positive-text:var(--color-success-300);
  --state-caution-surface:var(--color-warning-900);
  --state-caution-text:var(--color-warning-300);
  --state-negative-surface:var(--color-danger-900);
  --state-negative-text:var(--color-danger-300);
  --state-informative-surface:var(--color-info-900);
  --state-informative-text:var(--color-info-300);
}
[data-theme='light']{color-scheme:light}