/**
 * CEMIUX.DESIGN-SYSTEM.4B · Theme Token Foundation
 * One semantic color vocabulary, two resolved themes. Components consume the
 * existing --cemi-color-* aliases; theme resolution owns their values.
 */
:root,
html[data-cemi-theme="light"] {
  color-scheme: light;

  --cemi-theme-surface-base: #ffffff;
  --cemi-theme-surface-elevated: #ffffff;
  --cemi-theme-surface-subtle: #f7f8fa;
  --cemi-theme-surface-strong: #eef1f5;
  --cemi-theme-text-primary: #1a2231;
  --cemi-theme-text-secondary: #263142;
  --cemi-theme-text-muted: #6e6e6e;
  --cemi-theme-text-subtle: #8a93a2;
  --cemi-theme-border-default: #dfe3e9;
  --cemi-theme-border-strong: #c8ced8;
  --cemi-theme-accent-primary: #c81768;
  --cemi-theme-accent-strong: #a70f54;
  --cemi-theme-accent-soft: #f9e8f0;
  --cemi-theme-success: #247a52;
  --cemi-theme-warning: #9a6500;
  --cemi-theme-danger: #a8283a;
  --cemi-theme-focus: #1b5fd1;
  --cemi-theme-shadow-sm: 0 1px 2px rgba(26,34,49,.08);
  --cemi-theme-shadow-md: 0 10px 30px rgba(26,34,49,.10);
  --cemi-theme-shadow-lg: 0 24px 60px rgba(26,34,49,.14);

  --cemi-color-surface: var(--cemi-theme-surface-base);
  --cemi-color-surface-soft: var(--cemi-theme-surface-subtle);
  --cemi-color-surface-strong: var(--cemi-theme-surface-strong);
  --cemi-color-ink: var(--cemi-theme-text-primary);
  --cemi-color-text: var(--cemi-theme-text-secondary);
  --cemi-color-muted: var(--cemi-theme-text-muted);
  --cemi-color-subtle: var(--cemi-theme-text-subtle);
  --cemi-color-border: var(--cemi-theme-border-default);
  --cemi-color-border-strong: var(--cemi-theme-border-strong);
  --cemi-color-brand: var(--cemi-theme-accent-primary);
  --cemi-color-brand-strong: var(--cemi-theme-accent-strong);
  --cemi-color-brand-soft: var(--cemi-theme-accent-soft);
  --cemi-color-success: var(--cemi-theme-success);
  --cemi-color-warning: var(--cemi-theme-warning);
  --cemi-color-danger: var(--cemi-theme-danger);
  --cemi-color-focus: var(--cemi-theme-focus);
  --cemi-shadow-sm: var(--cemi-theme-shadow-sm);
  --cemi-shadow-md: var(--cemi-theme-shadow-md);
  --cemi-shadow-lg: var(--cemi-theme-shadow-lg);
}

html[data-cemi-theme="dark"] {
  color-scheme: dark;

  --cemi-theme-surface-base: #111722;
  --cemi-theme-surface-elevated: #18202d;
  --cemi-theme-surface-subtle: #1c2533;
  --cemi-theme-surface-strong: #263141;
  --cemi-theme-text-primary: #f5f7fa;
  --cemi-theme-text-secondary: #d7dce5;
  --cemi-theme-text-muted: #aab2bf;
  --cemi-theme-text-subtle: #8994a5;
  --cemi-theme-border-default: #344052;
  --cemi-theme-border-strong: #4a586c;
  --cemi-theme-accent-primary: #e33f88;
  --cemi-theme-accent-strong: #ff76ae;
  --cemi-theme-accent-soft: #3a1830;
  --cemi-theme-success: #57b98a;
  --cemi-theme-warning: #e0aa45;
  --cemi-theme-danger: #ef7181;
  --cemi-theme-focus: #74a7ff;
  --cemi-theme-shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --cemi-theme-shadow-md: 0 12px 32px rgba(0,0,0,.34);
  --cemi-theme-shadow-lg: 0 26px 64px rgba(0,0,0,.42);

  --cemi-color-surface: var(--cemi-theme-surface-base);
  --cemi-color-surface-soft: var(--cemi-theme-surface-subtle);
  --cemi-color-surface-strong: var(--cemi-theme-surface-strong);
  --cemi-color-ink: var(--cemi-theme-text-primary);
  --cemi-color-text: var(--cemi-theme-text-secondary);
  --cemi-color-muted: var(--cemi-theme-text-muted);
  --cemi-color-subtle: var(--cemi-theme-text-subtle);
  --cemi-color-border: var(--cemi-theme-border-default);
  --cemi-color-border-strong: var(--cemi-theme-border-strong);
  --cemi-color-brand: var(--cemi-theme-accent-primary);
  --cemi-color-brand-strong: var(--cemi-theme-accent-strong);
  --cemi-color-brand-soft: var(--cemi-theme-accent-soft);
  --cemi-color-success: var(--cemi-theme-success);
  --cemi-color-warning: var(--cemi-theme-warning);
  --cemi-color-danger: var(--cemi-theme-danger);
  --cemi-color-focus: var(--cemi-theme-focus);
  --cemi-shadow-sm: var(--cemi-theme-shadow-sm);
  --cemi-shadow-md: var(--cemi-theme-shadow-md);
  --cemi-shadow-lg: var(--cemi-theme-shadow-lg);
}

/* Generic CEMI-owned surfaces inherit the resolved base without imposing theme
   on WordPress technical screens outside CEMI-owned shells. */
html[data-cemi-theme] :where(.cemi-ux,.cemi-ux-shell,[data-cemi-design-materialized="1"]) {
  --cemi-theme-active-surface: var(--cemi-color-surface);
  --cemi-theme-active-text: var(--cemi-color-text);
}

/* Media is intentionally theme-stable: photos/visual overlays do not invert. */
:root,
html[data-cemi-theme="light"],
html[data-cemi-theme="dark"] {
  --cemi-ds-theme-media-accent: #ffffff;
  --cemi-ds-theme-media-bg: #1a2231;
  --cemi-ds-theme-media-border: transparent;
  --cemi-ds-theme-media-text: #ffffff;
}

/* High-impact actions keep deliberate contrast in dark mode instead of inheriting
   the light-mode inverse action through --cemi-color-ink. */
html[data-cemi-theme="dark"] {
  --cemi-ds-action-external-authority-bg: #f5f7fa;
  --cemi-ds-action-external-authority-text: #111722;
  --cemi-ds-action-destructive-bg: #ad2e43;
  --cemi-ds-action-destructive-text: #ffffff;
}