:root,
[data-theme="light"],
[data-layout-mode="light"] {
  --theme-bg-canvas: var(--theme-light-bg-canvas);
  --theme-bg-surface: var(--theme-light-bg-surface);
  --theme-bg-muted: var(--theme-light-bg-muted);
  --theme-text-primary: var(--theme-light-text-primary);
  --theme-text-secondary: var(--theme-light-text-secondary);
  --theme-border-strong: var(--theme-light-border-strong);
  --theme-border-soft: var(--theme-light-border-soft);
  --theme-primary: var(--theme-light-primary);
  --theme-primary-contrast: var(--theme-light-primary-contrast);
  --theme-success: var(--theme-light-success);
  --theme-warning: var(--theme-light-warning);
  --theme-danger: var(--theme-light-danger);
  --theme-purple: var(--theme-light-purple);
  --theme-secondary: var(--theme-light-secondary);
  --theme-info: var(--theme-light-info);
  --theme-focus-ring: var(--theme-light-focus);
}

[data-theme="dark"],
[data-layout-mode="dark"] {
  --theme-bg-canvas: var(--theme-dark-bg-canvas);
  --theme-bg-surface: var(--theme-dark-bg-surface);
  --theme-bg-muted: var(--theme-dark-bg-muted);
  --theme-text-primary: var(--theme-dark-text-primary);
  --theme-text-secondary: var(--theme-dark-text-secondary);
  --theme-border-strong: var(--theme-dark-border-strong);
  --theme-border-soft: var(--theme-dark-border-soft);
  --theme-primary: var(--theme-dark-primary);
  --theme-primary-contrast: var(--theme-dark-primary-contrast);
  --theme-success: var(--theme-dark-success);
  --theme-warning: var(--theme-dark-warning);
  --theme-danger: var(--theme-dark-danger);
  --theme-purple: var(--theme-dark-purple);
  --theme-secondary: var(--theme-dark-secondary);
  --theme-info: var(--theme-dark-info);
  --theme-focus-ring: var(--theme-dark-focus);
}

:root {
  /* Global adaptive color contract:
     any element with .ui-colorized + --ui-color-raw
     gets theme-aware readable color in --ui-color. */
  --ui-color-readable-dark-mix: 70%;
  --ui-color-soft-alpha: 15%;

  --theme-color-readable-dark-mix: 70%;
  --theme-color-readable-bg-alpha: 15%;
}

:where(
  .ui-colorized,
  .theme-colorized,
  .nc-tag.is-colored,
  .nc-select__chip.is-colored,
  .nc-select--chip.is-colored-label,
  .nc-select__option.theme-colorized,
  .osp-chip--colored:not(.is-active)
) {
  --ui-color: var(--ui-color-raw, var(--theme-color-raw, currentColor));
  --ui-color-soft-bg: color-mix(
    in srgb,
    var(--ui-color) var(--ui-color-bg-alpha, var(--theme-color-bg-alpha, var(--ui-color-soft-alpha))),
    transparent
  );

  /* Bridge old variables to the new contract. */
  --theme-color-resolved: var(--ui-color);
  --theme-color-bg: var(--ui-color-soft-bg);
}

[data-theme="dark"] :where(
  .ui-colorized,
  .theme-colorized,
  .nc-tag.is-colored,
  .nc-select__chip.is-colored,
  .nc-select--chip.is-colored-label,
  .nc-select__option.theme-colorized,
  .osp-chip--colored:not(.is-active)
),
[data-layout-mode="dark"] :where(
  .ui-colorized,
  .theme-colorized,
  .nc-tag.is-colored,
  .nc-select__chip.is-colored,
  .nc-select--chip.is-colored-label,
  .nc-select__option.theme-colorized,
  .osp-chip--colored:not(.is-active)
) {
  --ui-color: color-mix(
    in srgb,
    var(--ui-color-raw, var(--theme-color-raw, currentColor)) var(--ui-color-readable-dark-mix),
    white
  );

  --theme-color-resolved: var(--ui-color);
}