/* Our tokens, drawn from OpenBridge's semantic palette (openbridge.css, linked
   in index.html), so the whole app follows the palette picked on <html
   data-obc-theme="day|dusk|night|bright">. The fallbacks are the old fixed
   dark theme, used if the stylesheet doesn't load.
   --ob-cyan is the accent: OpenBridge's "enhanced" instrument colour, light
   blue at dusk, green at night (night keeps everything dim and warm). */
:root {
  --ob-bg: var(--container-backdrop-color, #0b0e11);
  --ob-surface: var(--container-background-color, #12171d);
  --ob-panel: var(--container-section-color, #182028);
  --ob-panel-header: color-mix(in srgb, var(--ob-panel), var(--ob-text-main) 4%);
  --ob-border: var(--border-outline-color, #283543);
  --ob-border-bright: var(--border-divider-color, #3a4c60);

  --ob-text-main: var(--element-active-color, #f0f4f8);
  --ob-text-dim: var(--element-neutral-color, #8899a6);
  --ob-text-muted: var(--element-disabled-color, #5c6e7e);

  --ob-cyan: var(--instrument-enhanced-primary-color, #00e5ff);
  --ob-cyan-dim: color-mix(in srgb, var(--ob-cyan) 15%, transparent);
  --ob-green: var(--alert-running-color, #00d26a);
  --ob-green-dim: color-mix(in srgb, var(--ob-green) 15%, transparent);
  --ob-amber: var(--alert-caution-color, #ffb000);
  --ob-amber-dim: color-mix(in srgb, var(--ob-amber) 15%, transparent);
  --ob-red: var(--alert-alarm-color, #ff3b30);
  --ob-red-dim: color-mix(in srgb, var(--ob-red) 15%, transparent);

  /* A control that is switched on: OpenBridge's "selected" state */
  --ob-on-bg: var(--selected-enabled-background-color, rgba(0, 210, 106, 0.15));
  --ob-on-border: var(--selected-enabled-border-color, #00d26a);
  --ob-on-text: var(--on-selected-active-color, #00d26a);

  --ob-focus: var(--border-focus-color, #00e5ff);
  --ob-shadow: color-mix(in srgb, var(--ob-bg) 60%, transparent);
  /* Dims and tints the map's shaded relief to sit in the palette (see Environment-view.js) */
  --ob-map-filter: brightness(0.55) contrast(1.5) saturate(0.6);

  --ob-font-ui: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ob-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Layout rhythm: one gap everywhere, tighter on phones (see components.css) */
  --ob-gap: 16px;
  --ob-pad: 16px;
  --ob-radius: 2px;
  --ob-touch: var(--global-size-spacing-touch-target-min, 48px);

  color-scheme: dark; /* native pickers, scrollbars and checkboxes follow the palette */
}

:root[data-obc-theme="day"],
:root[data-obc-theme="bright"] {
  color-scheme: light;
  --ob-panel-header: color-mix(in srgb, var(--ob-panel), var(--ob-text-main) 6%);
  --ob-map-filter: saturate(0.7);
}

/* Night: no bright tiles in a dark wheelhouse */
:root[data-obc-theme="night"] {
  --ob-map-filter: brightness(0.35) contrast(1.4) saturate(0.3) sepia(0.6);
}