/* Shared Kystlinjen surfaces. Load after the existing shell/planner styles.
   The existing controllers continue to own theme selection and geometry. */
:root {
  color-scheme: light;
  --font-ui: "Avenir Next", "Segoe UI", sans-serif;
  --ink: #173c45;
  --muted: #506c74;
  --quiet: #526e75;
  --sea: #245a66;
  --sea-ink: #f3f9f5;
  --error: #b42323;
  --edge: #244d5624;
  --edge-strong: #244d5652;
  --surface: #f2f5ef;
  --surface-top: #f7faf4;
  --surface-bottom: #ecf1eb;
  --surface-glass: #f2f5eff5;
  --input: #ffffffb3;
  --hover: #29636e0e;
  --selected: #29636e16;
  --shadow: 0 24px 65px #1a383d24, 0 3px 12px #1a383d14;
  --shadow-soft: 0 8px 24px #1a383d18;
  --surface-gradient: linear-gradient(145deg, var(--surface-top), var(--surface-bottom) 78%);

  /* Feed the established components; they still use their existing tokens. */
  --panel: var(--surface);
  --panel-soft: var(--surface-bottom);
  --panel-glass: var(--surface-glass);
  --accent: var(--sea);
  --accent-strong: var(--sea);
  --accent-soft: var(--selected);
  --border: var(--edge);
  --input-bg: var(--input);
  --ghost-bg: var(--hover);
  --segmented-bg: var(--input);
  --segmented-active-bg: var(--selected);
  --scrollbar-thumb: var(--edge-strong);
  --background: var(--surface-bottom);
  --radius-lg: 23px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eaf1ed;
  --muted: #a5bdc3;
  --quiet: #8baab2;
  --sea: #b4dde0;
  --sea-ink: #0e303a;
  --error: #ff8b8b;
  --edge: #b5dbe229;
  --edge-strong: #b5dbe259;
  --surface: #112d38;
  --surface-top: #1b3a45;
  --surface-bottom: #0c2632;
  --surface-glass: #112d38f5;
  --input: #0519226b;
  --hover: #acd7de13;
  --selected: #abdadf1f;
  --shadow: 0 24px 65px #000c1442, 0 4px 12px #000a1124;
  --shadow-soft: 0 8px 24px #031b2629;
}

:is(.app, .shell),
[data-theme="dark"] :is(.app, .shell) {
  --route-canvas-rail-surface: var(--surface);
  --route-canvas-rail-veil: var(--selected);
  --route-canvas-rail-edge: var(--edge);
  --route-canvas-rail-shadow: var(--shadow);
  --route-canvas-hairline: var(--edge);
  --route-canvas-ink: var(--ink);
  --route-canvas-muted: var(--muted);
  --route-canvas-dock-surface: var(--surface-glass);
  --route-canvas-dock-strip: var(--input);
  --route-canvas-dock-edge: var(--edge);
  --route-canvas-dock-shadow: var(--shadow-soft);
  --route-canvas-accent-wash: var(--selected);
  --route-canvas-accent-line: var(--edge-strong);
  --route-canvas-header-surface: var(--surface);
  --route-canvas-radius: 23px;
  --route-canvas-radius-sm: 12px;
  --route-canvas-radius-xs: 9px;
  --route-rail-surface: var(--surface);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body,
:is(.app, .shell) :is(button, input, select, textarea),
.maplibregl-popup {
  font-family: var(--font-ui);
}

:is(.app, .shell) :is(button, a, input, select, textarea):focus-visible {
  outline-color: var(--sea);
}

.language-picker option {
  color: var(--ink);
  background: var(--surface);
}