/* Current dark palette. Equal values intentionally retain distinct semantic roles. */
:root,
html[data-theme="dark"] {
  --native-color-scheme: dark;
  color-scheme: var(--native-color-scheme);
  --color-bg: #091724;
  --color-surface: #122737;
  --color-surface-alt: #10222f;
  --color-surface-active: #1d394c;
  --color-border: #264555;
  --color-border-strong: #486373;
  --color-border-placeholder: #3c596a;
  --color-text: #ffffff;
  --color-text-muted: #a9bdca;
  --color-brand-bronze: #b87333;
  --color-accent-cyan: #67e1d4;
  --color-focus: #67e1d4;
  --color-hover-bg: #1d394c;
  --color-selected-bg: #1d394c;
  --color-warning: #f5b34a;
  --color-warning-bg: #24251f;
  --color-warning-bg-alt: #29251e;
  --color-warning-bg-strong: #3a3021;
  --color-warning-border: #665130;
  --color-warning-border-strong: #806338;
  --color-critical: #ffc0c5;
  --color-critical-bg: #35222c;
  --color-critical-border: #b66770;
  --color-critical-indicator: #cd5c5c;
  --color-navigation-restriction: #b87333;
  --color-gauge-rise: #78ce95;
  --color-gauge-fall: #b87333;
  --color-chart-main: #67e1d4;
  --color-chart-reference: #a9bdca;
  --color-chart-grid: #264555;
  --color-chart-cursor: #67e1d4;
  --color-chart-passage: #f5b34a;
  --color-chart-marker-fill: #10222f;
  --color-chart-marker-border: #ffffff;
  --color-chart-label-outline: #10222f;
  /* Distinct existing roles: NU stays white; the selected cursor stays cyan. */
  --color-chart-now: #ffffff;
  --color-chart-cursor-border: #091724;
  --color-chart-label: #a9bdca;
  --color-chart-label-strong: #ffffff;
  --color-backdrop-dialog: rgb(4 12 20 / .8);
  --color-backdrop-menu: rgb(0 0 0 / .4);
  --color-shadow-menu: #0008;
  --color-shadow-detail: #0009;

  /* Compatibility for components awaiting later migration phases. */
  --bronze-rgb: 184 115 51;
  --background: var(--color-bg);
  --surface: var(--color-surface);
  --surface-deep: var(--color-surface-alt);
  --surface-active: var(--color-surface-active);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --line-placeholder: var(--color-border-placeholder);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent-cyan);
  --bronze: var(--color-brand-bronze);
  --amber: var(--color-warning);
  --positive: var(--color-gauge-rise);
  --critical: var(--color-critical);
}

/* Light palette overrides; compatibility aliases inherit these token values. */
html[data-theme="light"] {
  --native-color-scheme: light;
  color-scheme: light;

  --color-bg: #f3f5f7;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f5;
  --color-surface-active: #e5edf2;

  --color-border: #c7d0d8;
  --color-border-strong: #a9b6c1;
  --color-border-placeholder: #b8c3cc;

  --color-text: #17212b;
  --color-text-muted: #64727f;

  --color-brand-bronze: #b87333;
  --color-accent-cyan: #087f7b;
  --color-focus: #0b8f89;
  --color-hover-bg: #e7eef2;
  --color-selected-bg: #dce9ed;

  --color-warning: #a85e00;
  --color-warning-bg: #fff5e6;
  --color-warning-bg-alt: #fff0d8;
  --color-warning-bg-strong: #ffe3b5;
  --color-warning-border: #d99b4a;
  --color-warning-border-strong: #bd7620;

  --color-critical: #9b2533;
  --color-critical-bg: #fdecef;
  --color-critical-border: #d66c78;
  --color-critical-indicator: #bf3f4d;

  --color-navigation-restriction: #a86123;
  --color-gauge-rise: #1f7a4f;
  --color-gauge-fall: #a86123;

  --color-chart-main: #078f89;
  --color-chart-reference: #7a8791;
  --color-chart-grid: #c7d5dd;
  --color-chart-cursor: #078f89;
  --color-chart-passage: #b76a00;
  --color-chart-marker-fill: #ffffff;
  --color-chart-marker-border: #26323c;
  --color-chart-label-outline: #ffffff;
  --color-chart-now: #33424d;
  --color-chart-cursor-border: #ffffff;
  --color-chart-label: #40515e;
  --color-chart-label-strong: #18242d;

  --color-backdrop-dialog: rgb(35 45 55 / .45);
  --color-backdrop-menu: rgb(35 45 55 / .25);
  --color-shadow-menu: #0003;
  --color-shadow-detail: #0004;
}
/* Shared identity colors: official flag colors and existing cache-border semantics. */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --color-source-cache-border: rgb(var(--bronze-rgb));
  --color-flag-nl-red: #ae1c28;
  --color-flag-nl-white: #ffffff;
  --color-flag-nl-blue: #21468b;
  --color-flag-de-black: #000000;
  --color-flag-de-red: #dd0000;
  --color-flag-de-gold: #ffce00;
}