:root {
  color-scheme: light dark;
  --color-brand: #2563eb;
  --color-brand-mix: #24a2d2;
  --color-brand-relative: #3978f2;
  --color-brand-surface: #ffffff;
  --color-brand-text: #ffffff;
  --color-brand-wide-gamut: #2563eb;
  --color-brand-alpha: rgb(37 99 235 / 1);
  --color-brand-hover: #1856ce;
  --color-brand-active: #0643aa;
  --color-brand-subtle-surface: #245f89;
  --color-brand-border: #96b7f4;
  --color-brand-focus-ring: #006aff;
  --color-brand-disabled: #a4b9ed;
}

/* Deterministic fallback for browsers without light-dark(). */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-surface: #0f172a;
    --color-brand-border: #1a315d;
    --color-brand-disabled: #182d59;
  }
}

@supports (color: color-mix(in oklch, black, white)) {
  :root {
    --color-brand-mix: color-mix(in oklch, #2563eb 72%, #2dd4bf 28%);
    --color-brand-border: color-mix(in oklch, var(--color-brand) 36%, var(--color-brand-surface));
  }
}

@supports (color: oklch(from red l c h)) {
  :root {
    --color-brand-relative: oklch(from var(--color-brand) calc(l + .08) calc(c * .82) h);
    --color-brand-hover: oklch(from var(--color-brand) calc(l - .07) c h);
    --color-brand-active: oklch(from var(--color-brand) calc(l - .13) c h);
  }
}

@supports (color: light-dark(white, black)) {
  :root {
    --color-brand-surface: light-dark(#ffffff, #0f172a);
  }
}

@supports (color: contrast-color(white)) {
  :root {
    --color-brand-text: contrast-color(var(--color-brand));
  }
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    --color-brand: color(display-p3 0.232 0.38 0.89);
    --color-brand-wide-gamut: color(display-p3 0.232 0.38 0.89);
  }
}

/* Uncalibrated print-planning value; not an ICC proof. */
@supports (color: device-cmyk(84% 58% 0% 8%)) {
  :root {
    --color-brand-print-plan: device-cmyk(84% 58% 0% 8%);
  }
}