:root {
  /* Backward-compatible aliases used across the current application. */
  --bg-app: var(--color-bg);
  --surface-base: var(--color-surface-1);
  --surface-elevated: var(--color-surface-2);
  --surface-glass-bg: var(--color-surface-1);
  --border-subtle: var(--color-border);
  --border-strong: var(--color-border-strong);
  --border-focus: var(--color-focus);
  --text-title: var(--color-text-primary);
  --text-body: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --brand-primary: var(--color-brand);
  --brand-hover: var(--color-brand-hover);
  --accent-success: var(--color-success);
  --accent-warning: var(--color-warning);
  --accent-danger: var(--color-danger);
  --accent-info: var(--color-info);
  --accent-purple: var(--color-purple);
}

html,
html[data-theme='light'] {
  --color-bg: #f4f4f5;
  --color-surface-1: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-3: #f4f4f5;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;
  --color-focus: #ea580c;
  --color-text-primary: #09090b;
  --color-text-secondary: #27272a;
  --color-text-muted: #52525b;
  --color-brand: #ea580c;
  --color-brand-hover: #c2410c;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --color-purple: #7c3aed;
  --color-overlay-backdrop: rgba(0, 0, 0, 0.60);
  --glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

html[data-theme='dark'] {
  --color-bg: #09090b;
  --color-surface-1: #18181b;
  --color-surface-2: #27272a;
  --color-surface-3: #303036;
  --color-border: #27272a;
  --color-border-strong: #3f3f46;
  --color-focus: #ea580c;
  --color-text-primary: #ffffff;
  --color-text-secondary: #e4e4e7;
  --color-text-muted: #a1a1aa;
  --color-brand: #f97316;
  --color-brand-hover: #ea580c;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #38bdf8;
  --color-purple: #a78bfa;
  --color-overlay-backdrop: rgba(0, 0, 0, 0.72);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html[data-palette='napoli'] {
  --color-brand: #e11d48;
  --color-brand-hover: #be123c;
  --color-focus: rgba(225, 29, 72, 0.4);
}
html[data-theme='dark'][data-palette='napoli'] {
  --color-brand: #fb7185;
  --color-brand-hover: #e11d48;
  --color-focus: rgba(251, 113, 133, 0.5);
}

html[data-palette='kyoto'] {
  --color-brand: #16a34a;
  --color-brand-hover: #15803d;
  --color-focus: rgba(22, 163, 74, 0.4);
}
html[data-theme='dark'][data-palette='kyoto'] {
  --color-brand: #4ade80;
  --color-brand-hover: #16a34a;
  --color-focus: rgba(74, 222, 128, 0.5);
}

html[data-palette='oaxaca'] {
  --color-brand: #d97706;
  --color-brand-hover: #b45309;
  --color-focus: rgba(217, 119, 6, 0.4);
}
html[data-theme='dark'][data-palette='oaxaca'] {
  --color-brand: #fbbf24;
  --color-brand-hover: #d97706;
  --color-focus: rgba(251, 191, 36, 0.5);
}

html[data-palette='lyon'] {
  --color-brand: #831843;
  --color-brand-hover: #4c0519;
  --color-focus: rgba(131, 24, 67, 0.4);
}
html[data-theme='dark'][data-palette='lyon'] {
  --color-brand: #f472b6;
  --color-brand-hover: #db2777;
  --color-focus: rgba(244, 114, 182, 0.5);
}

html[data-palette='bangkok'] {
  --color-brand: #ca8a04;
  --color-brand-hover: #a16207;
  --color-focus: rgba(202, 138, 4, 0.4);
}
html[data-theme='dark'][data-palette='bangkok'] {
  --color-brand: #fde047;
  --color-brand-hover: #eab308;
  --color-focus: rgba(253, 224, 71, 0.5);
}