/* Shared palette: website and both application shells. No application selectors. */
:root {
  color-scheme: light;
  --background: #F3F7F6;
  --surface: #FFFFFF;
  --surface-elevated: #F3F7F6;
  --text-primary: #102322;
  /* Slightly deeper than palette muted for AA on soft selections as well. */
  --text-secondary: #586B66;
  --palette-muted: #657473;
  --border: #DCE7E4;
  --control-border: #738781;
  --brand-primary: #073B3A;
  --brand-accent: #20C997;
  --selection: #DDF5EC;
  --action: #073B3A;
  --on-action: #FFFFFF;
  --on-accent: #102322;
  --action-hover: #0B514D;
  --action-pressed: #052C2B;
  --hover: #E7EFEC;
  --pressed: #D3E5DE;
  --disabled-bg: #E6EEEB;
  --disabled-text: #586B66;
  --focus: #08765B;
  --success: #186344;
  --success-soft: #E5F3EB;
  --danger: #A12626;
  --danger-soft: #FCECEB;
  --warning: #705400;
  --warning-soft: #FFF3CC;
  --overlay: #073B3A;
  --on-overlay: #F0FAF7;
  --scrim: #071D1BAA;
  --shadow-color: #10232224;
  /* Fixed contrast against the unchanged light basemap, independent of theme. */
  --map-target-ring: #073B3A;
  --map-complete: #B9C3C7;
  --on-map-complete: #102322;
  /* Existing component aliases, all palette values live above. */
  --bg: var(--background);
  --card: var(--surface);
  --card-soft: var(--surface-elevated);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --accent: var(--brand-accent);
  --accent-strong: var(--focus);
  --safe: var(--brand-accent);
  --safe-soft: var(--selection);
  --route: var(--brand-accent);
  --panel: var(--overlay);
  --panel-soft: var(--overlay);
  --text-inverse: var(--on-overlay);
  --shadow: 0 18px 44px var(--shadow-color);
  --shadow-soft: 0 16px 40px var(--shadow-color);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0D1717;
  --surface: #142221;
  --surface-elevated: #1A2B29;
  --text-primary: #F0FAF7;
  --text-secondary: #91A7A1;
  --palette-muted: #91A7A1;
  --border: #263936;
  --control-border: #708E85;
  --brand-primary: #52E0B5;
  --brand-accent: #52E0B5;
  --selection: #193D35;
  --action: #52E0B5;
  --on-action: #102322;
  --action-hover: #7BEAC9;
  --action-pressed: #39C99D;
  --hover: #223932;
  --pressed: #2D4B41;
  --disabled-bg: #263936;
  --disabled-text: #A6BAB4;
  --focus: #52E0B5;
  --success: #83DBAB;
  --success-soft: #18382B;
  --danger: #FFACA6;
  --danger-soft: #422726;
  --warning: #F2D17B;
  --warning-soft: #3A321B;
  --overlay: #142221;
  --shadow-color: #00000040;
}
html { background: var(--background); color: var(--text-primary); }
.theme-setting { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.4 "Segoe UI", sans-serif; color: var(--text-secondary); max-width: 100%; }
.theme-setting select { font: inherit; min-height: 44px; max-width: 100%; padding: 7px 26px 7px 10px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text-primary); cursor: pointer; }
.theme-setting select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }