: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);
  --theme-accent: var(--ui-accent-text-light, var(--theme-light-success));
  /* Фирменный акцент (D504, план ui-theme-custom-plan v4). Стандарт — буквально нынешние цвета мест;
     --ui-accent-* ставит шапка только при своём цвете человека (common/ui_prefs.php). */
  --theme-accent-base: var(--ui-accent, #0ab39c);
  --theme-accent-menu: var(--ui-accent-text-dark, #0ab39c);
  --theme-accent-btn-top: var(--ui-accent-btn-top, #14b8a6);
  --theme-accent-btn-bottom: var(--ui-accent-btn-bottom, #0f9d8c);
  --theme-accent-btn-hover-top: var(--ui-accent-btn-hover-top, #10a997);
  --theme-accent-btn-hover-bottom: var(--ui-accent-btn-hover-bottom, #0d8e7f);
  --theme-accent-contrast: var(--ui-accent-contrast, #fff);
  /* Главные кнопки действия nc-btn--success (решение владельца 23.10): стандарт — прежний зелёный градиент,
     свой цвет — тот же градиент, что у главной кнопки. */
  --theme-accent-action-top: var(--ui-accent-btn-top, #28c76f);
  --theme-accent-action-bottom: var(--ui-accent-btn-bottom, #1ca95b);
  --theme-accent-action-hover-top: var(--ui-accent-btn-hover-top, #22b763);
  --theme-accent-action-hover-bottom: var(--ui-accent-btn-hover-bottom, #189a52);
}

[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);
  --theme-accent: var(--ui-accent-text-dark, var(--theme-dark-success));
  /* Фирменный акцент (D504, план ui-theme-custom-plan v4). Стандарт — буквально нынешние цвета мест;
     --ui-accent-* ставит шапка только при своём цвете человека (common/ui_prefs.php). */
  --theme-accent-base: var(--ui-accent, #0ab39c);
  --theme-accent-menu: var(--ui-accent-text-dark, #0ab39c);
  --theme-accent-btn-top: var(--ui-accent-btn-top, #14b8a6);
  --theme-accent-btn-bottom: var(--ui-accent-btn-bottom, #0f9d8c);
  --theme-accent-btn-hover-top: var(--ui-accent-btn-hover-top, #10a997);
  --theme-accent-btn-hover-bottom: var(--ui-accent-btn-hover-bottom, #0d8e7f);
  --theme-accent-contrast: var(--ui-accent-contrast, #fff);
  /* Главные кнопки действия nc-btn--success (решение владельца 23.10): стандарт — прежний зелёный градиент,
     свой цвет — тот же градиент, что у главной кнопки. */
  --theme-accent-action-top: var(--ui-accent-btn-top, #28c76f);
  --theme-accent-action-bottom: var(--ui-accent-btn-bottom, #1ca95b);
  --theme-accent-action-hover-top: var(--ui-accent-btn-hover-top, #22b763);
  --theme-accent-action-hover-bottom: var(--ui-accent-btn-hover-bottom, #189a52);
}

: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
) {
  --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
),
[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
) {
  --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);
}