/* AUTO-GENERATED from docs/design/ui-themes.json — run tools/sync-theme-tokens.py */
/* VesselNow — Day / Dusk / Night theme overrides */

:root,
[data-ui-theme="night"] {
  --bg: #0A1628;
  --surface: #0F1E35;
  --card: #152540;
  --elevated: #1E3354;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.15);
  --accent: #1B6CA8;
  --accent-dim: rgba(27,108,168,0.3);
  --teal: #0C8A7A;
  --teal-bright: #12C4AE;
  --cyan: #1BC8C8;
  --text: #E8F2FF;
  --text-dim: #7A9BBF;
  --text-faint: #3D5470;
  --label: #8AAFD4;
  --text-on-accent: #FFFFFF;
  --ok: #1EA85C;
  --ok-dim: rgba(30,168,92,0.15);
  --warn: #E08C00;
  --warn-dim: rgba(224,140,0,0.15);
  --crit: #D63030;
  --crit-dim: rgba(214,48,48,0.15);
  --topbar-chrome: #060E1A;
  --theme-color: #060E1A;
  --toggle-group-bg: rgba(6,14,26,0.88);
  --leaflet-control-bg: rgba(6,14,26,0.9);
  --bg2: #0A1526;
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.15);
  --navy-900: #060E1A;
  --navy-800: #0A1628;
  --nav-glass: rgba(6,14,26,0.72);
  --sky: #38BDF8;
  --gauge-track: rgba(255,255,255,0.10);
  --gauge-label: #8AAFD4;
  --glass-panel: rgba(15,30,53,0.92);
  --data-strip-bg: rgba(15,30,53,0.88);
  --data-strip-divider: rgba(255,255,255,0.10);
  --settings-sidebar-bg: #080F1C;
  --settings-input-bg: #1A2D48;
  --settings-input-focus-bg: #1F3252;
  --settings-savebar-bg: rgba(6, 11, 22, 0.97);
  --settings-modal-scrim: rgba(6, 10, 18, 0.88);
  --settings-code-bg: #080F1C;
  --settings-sidebar-hover: rgba(255, 255, 255, 0.025);
  --settings-sidebar-active: rgba(27, 108, 168, 0.12);
}

[data-ui-theme="day"] {
  --bg: #E8EEF5;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --elevated: #DCE6F0;
  --border: rgba(10, 22, 40, 0.12);
  --border-bright: rgba(10, 22, 40, 0.20);
  --accent: #1B6CA8;
  --accent-dim: rgba(27,108,168,0.12);
  --teal: #0C8A7A;
  --teal-bright: #0A7A6C;
  --cyan: #159A9A;
  --text: #0A1628;
  --text-dim: #4A6278;
  --text-faint: #8AA0B8;
  --label: #3D5A78;
  --text-on-accent: #FFFFFF;
  --ok: #168A4A;
  --ok-dim: rgba(22,138,74,0.12);
  --warn: #C47A00;
  --warn-dim: rgba(196,122,0,0.12);
  --crit: #C42828;
  --crit-dim: rgba(196,40,40,0.12);
  --topbar-chrome: #E8EEF6;
  --theme-color: #E8EEF6;
  --toggle-group-bg: rgba(255,255,255,0.92);
  --leaflet-control-bg: rgba(255,255,255,0.95);
  --bg2: #EEF3F9;
  --line: rgba(10,22,40,0.08);
  --line2: rgba(10,22,40,0.12);
  --navy-900: #E8EEF6;
  --navy-800: #F4F7FB;
  --nav-glass: rgba(255,255,255,0.85);
  --sky: #38BDF8;
  --gauge-track: rgba(10,22,40,0.12);
  --gauge-label: #3D5A78;
  --glass-panel: #FFFFFF;
  --data-strip-bg: #FFFFFF;
  --data-strip-divider: rgba(10,22,40,0.10);
  --settings-sidebar-bg: #E8EEF6;
  --settings-input-bg: #FFFFFF;
  --settings-input-focus-bg: #FFFFFF;
  --settings-savebar-bg: rgba(255, 255, 255, 0.97);
  --settings-modal-scrim: rgba(10, 22, 40, 0.42);
  --settings-code-bg: #F0F4FA;
  --settings-sidebar-hover: rgba(10, 22, 40, 0.05);
  --settings-sidebar-active: rgba(27, 108, 168, 0.14);
}

[data-ui-theme="dusk"] {
  --bg: #2A3548;
  --surface: #343F52;
  --card: #3D4A60;
  --elevated: #4A5870;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.12);
  --accent: #1B6CA8;
  --accent-dim: rgba(27,108,168,0.25);
  --teal: #0C8A7A;
  --teal-bright: #12C4AE;
  --cyan: #1BC8C8;
  --text: #D8E6F5;
  --text-dim: #9BB0C8;
  --text-faint: #6A7F98;
  --label: #A8C0DC;
  --text-on-accent: #FFFFFF;
  --ok: #1EA85C;
  --ok-dim: rgba(30,168,92,0.15);
  --warn: #E08C00;
  --warn-dim: rgba(224,140,0,0.15);
  --crit: #D63030;
  --crit-dim: rgba(214,48,48,0.15);
  --topbar-chrome: #1E2838;
  --theme-color: #1E2838;
  --toggle-group-bg: rgba(30,40,56,0.88);
  --leaflet-control-bg: rgba(30,40,56,0.92);
  --bg2: #252E40;
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.12);
  --navy-900: #1E2838;
  --navy-800: #2A3548;
  --nav-glass: rgba(30,40,56,0.78);
  --sky: #38BDF8;
  --gauge-track: rgba(255,255,255,0.10);
  --gauge-label: #A8C0DC;
  --glass-panel: #3D4A60;
  --data-strip-bg: rgba(52,63,82,0.90);
  --data-strip-divider: rgba(255,255,255,0.10);
  --settings-sidebar-bg: #1E2838;
  --settings-input-bg: #4A5870;
  --settings-input-focus-bg: #556480;
  --settings-savebar-bg: rgba(30, 40, 56, 0.97);
  --settings-modal-scrim: rgba(10, 14, 22, 0.78);
  --settings-code-bg: #343F52;
  --settings-sidebar-hover: rgba(255, 255, 255, 0.04);
  --settings-sidebar-active: rgba(27, 108, 168, 0.18);
}

/* Watch (Red) — night-vision mode, ported from VesselUI vn-themes.css */
[data-ui-theme="watch"] {
  --bg: #000000;
  --surface: #0A0A0A;
  --card: #111111;
  --elevated: #1A1A1A;
  --border: rgba(214, 48, 48, 0.18);
  --border-bright: rgba(214, 48, 48, 0.32);
  --accent: #D63030;
  --accent-dim: rgba(214, 48, 48, 0.22);
  --teal: #C03030;
  --teal-bright: #E84848;
  --cyan: #E84848;
  --text: #E84848;
  --text-dim: rgba(232, 72, 72, 0.65);
  --text-faint: rgba(232, 72, 72, 0.38);
  --label: rgba(232, 72, 72, 0.75);
  --text-on-accent: #000000;
  --ok: #E84848;
  --ok-dim: rgba(232, 72, 72, 0.15);
  --warn: #FF8844;
  --warn-dim: rgba(255, 136, 68, 0.15);
  --crit: #FF3333;
  --crit-dim: rgba(255, 51, 51, 0.18);
  --topbar-chrome: #000000;
  --theme-color: #000000;
  --toggle-group-bg: rgba(0, 0, 0, 0.88);
  --leaflet-control-bg: rgba(0, 0, 0, 0.9);
  --bg2: #0A0A0A;
  --line: rgba(214, 48, 48, 0.12);
  --line2: rgba(214, 48, 48, 0.22);
  --navy-900: #000000;
  --navy-800: #0A0A0A;
  --nav-glass: rgba(0, 0, 0, 0.72);
  --sky: #E84848;
  --gauge-track: rgba(214, 48, 48, 0.12);
  --gauge-label: rgba(232, 72, 72, 0.55);
  --glass-panel: rgba(10, 10, 10, 0.95);
  --data-strip-bg: rgba(10, 10, 10, 0.88);
  --data-strip-divider: rgba(214, 48, 48, 0.15);
  --settings-sidebar-bg: #0A0A0A;
  --settings-input-bg: #1A1A1A;
  --settings-input-focus-bg: #222222;
  --settings-savebar-bg: rgba(0, 0, 0, 0.97);
  --settings-modal-scrim: rgba(0, 0, 0, 0.82);
  --settings-code-bg: #0A0A0A;
  --settings-sidebar-hover: rgba(214, 48, 48, 0.08);
  --settings-sidebar-active: rgba(214, 48, 48, 0.18);
}

/* Aliases for marketing CSS + legacy portal tokens */
:root,
[data-ui-theme="night"],
[data-ui-theme="day"],
[data-ui-theme="dusk"],
[data-ui-theme="watch"] {
  --dim: var(--text-dim);
  --faint: var(--text-faint);
  --line: var(--border);
  --line2: var(--border-bright);
  --ui: var(--font-ui, 'DM Sans', sans-serif);
  --display: var(--font-display, 'Space Grotesk', sans-serif);
  --mono: var(--font-data, 'IBM Plex Mono', monospace);
  --vn-bg: var(--bg);
  --vn-card: var(--card);
  --vn-surface: var(--elevated);
  --vn-text: var(--text);
  --vn-muted: var(--text-dim);
  --vn-accent: var(--accent);
  --vn-accent-light: var(--cyan);
  --vn-success: var(--ok);
  --vn-warning: var(--warn);
  --vn-error: var(--crit);
  /* Legacy style.css blues → theme accent (fixes Day login/CTA) */
  --blue-500: var(--accent);
  --blue-400: var(--cyan, #2279d4);
  --blue-300: var(--cyan, #4a9fef);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: var(--blue-400);
}

[data-ui-theme="day"] {
  --blue-400: #1b6ca8;
  --blue-300: #2279d4;
  --btn-primary-fg: #ffffff;
  --silver-100: #1a2332;
  --silver-200: #3a4a5c;
  --silver-300: #5a6a7c;
}

[data-ui-theme="watch"] {
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: #ff4d4d;
}

html.vn-theme-animate *,
html.vn-theme-animate *::before,
html.vn-theme-animate *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}
html.vn-theme-switching *,
html.vn-theme-switching *::before,
html.vn-theme-switching *::after {
  transition: none !important;
}