/* Long Thành Night Operations — design tokens */
:root,
html[data-color-mode="dark"],
html[data-theme="system"],
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050a12;
  --bg-2: #08111f;
  --surface: #101e30;
  --surface-2: #0d1828;
  --surface-3: #13243a;
  --elevated: #0d1828;
  --ink: #f5f7fa;
  --ink-muted: #aab7c7;
  --ink-faint: #718096;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --brand: #38a7ff;
  --brand-strong: #6bc0ff;
  --brand-soft: rgba(56, 167, 255, 0.14);
  --amber: #f6b73c;
  --gold: #ffc857;
  --orange: #ff8a34;
  --success: #39d98a;
  --success-soft: rgba(57, 217, 138, 0.12);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, 0.14);
  --danger: #ff5a5f;
  --danger-soft: rgba(255, 90, 95, 0.14);
  --info: #38a7ff;
  --purple: #9b7bff;
  --focus: #ffc857;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
  --glow-live: 0 0 12px rgba(57, 217, 138, 0.35);
  --glow-amber: 0 0 14px rgba(246, 183, 60, 0.28);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --header-h: 56px;
  --bottom-nav-h: 60px;
  --max: 1800px;
  --font-display: "Barlow Condensed", "Roboto Condensed", "Inter Tight", system-ui, sans-serif;
  --font-body: Inter, "SF Pro Text", "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --hero-overlay: linear-gradient(
    120deg,
    rgba(5, 10, 18, 0.94) 0%,
    rgba(8, 17, 31, 0.88) 45%,
    rgba(13, 24, 40, 0.78) 100%
  );
  /* aliases for legacy ops/styles */
  --text: var(--ink);
  --muted: var(--ink-muted);
  --card: var(--surface);
  --card2: var(--surface-2);
  --blue: var(--brand);
  --cyan: var(--success);
  --navy: var(--ink);
  --red: var(--danger);
  --green: var(--success);
  --score-primary-border: var(--amber);
  --glass-bg: rgba(16, 30, 48, 0.88);
  --glass-bg-strong: rgba(13, 24, 40, 0.94);
  --glass-bg-card: rgba(16, 30, 48, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: var(--shadow-sm);
  --glass-blur: none;
  --kpi-panel-bg: rgba(16, 30, 48, 0.72);
  --stat-panel-bg: rgba(13, 24, 40, 0.78);
  --sync-strip-bg: rgba(5, 10, 18, 0.45);
  --bottom-nav-bg: rgba(8, 17, 31, 0.94);
}

/* Optional light mode (secondary) — still operational, not flat grey */
html[data-color-mode="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --bg-2: #e4ebf3;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e8eef6;
  --elevated: #ffffff;
  --ink: #0c1a2b;
  --ink-muted: #4a5d73;
  --ink-faint: #6b7f94;
  --line: rgba(12, 26, 43, 0.1);
  --line-strong: rgba(12, 26, 43, 0.16);
  --brand: #0b6bcb;
  --brand-strong: #084f98;
  --brand-soft: #e7f1fb;
  --amber: #a66d00;
  --gold: #8a5a00;
  --orange: #c2410c;
  --success: #0d7a4a;
  --success-soft: #e6f6ee;
  --warning: #9a5b00;
  --warning-soft: #fff5e6;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --info: #0b6bcb;
  --purple: #6d4aff;
  --focus: #0b6bcb;
  --shadow: 0 10px 28px rgba(12, 35, 64, 0.1);
  --shadow-sm: 0 4px 12px rgba(12, 35, 64, 0.07);
  --glow-live: none;
  --glow-amber: none;
  --hero-overlay: linear-gradient(
    120deg,
    rgba(238, 242, 247, 0.92) 0%,
    rgba(238, 242, 247, 0.78) 100%
  );
  --text: var(--ink);
  --muted: var(--ink-muted);
  --card: var(--surface);
  --card2: var(--surface-2);
  --blue: var(--brand);
  --navy: var(--ink);
  --red: var(--danger);
  --green: var(--success);
  --score-primary-border: var(--amber);
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-bg-strong: rgba(255, 255, 255, 0.96);
  --glass-bg-card: #fff;
  --glass-border: rgba(12, 26, 43, 0.1);
  --glass-shadow: var(--shadow-sm);
  /* Light-mode panel surfaces (no navy glass) */
  --kpi-panel-bg: rgba(255, 255, 255, 0.92);
  --stat-panel-bg: #ffffff;
  --sync-strip-bg: rgba(238, 242, 247, 0.92);
  --bottom-nav-bg: rgba(255, 255, 255, 0.96);
  --max: 1800px;
}

@supports (backdrop-filter: blur(12px)) {
  html[data-color-mode="dark"] {
    --glass-bg: rgba(16, 30, 48, 0.72);
    --glass-bg-strong: rgba(13, 24, 40, 0.82);
    --glass-blur: blur(14px) saturate(120%);
  }
}