:root {
  color-scheme: dark;

  /* Base backgrounds */
  --bg: #0b1426;
  --card: #16233a;

  /* Text */
  --fg: #f8fbff;
  --muted: #a8b6cc;
  --muted-2: #8fa1bb;
  --label: #d6e2f2;

  /* Main accent */
  --accent: #2f7fff;
  --accent-contrast: #06101c;

  /* Borders */
  --border: #2d3f5c;
  --border-2: #3a5274;

  /* Surfaces */
  --surface: #1a2a44;
  --surface-2: #121e34;
  --surface-3: #182741;
  --surface-4: #22365a;

  /* Shadows & focus */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.38);
  --focus-ring: 0 0 0 3px rgba(47, 127, 255, 0.32);

  /* Header */
  --header-bg: #121f38;
  --header-border: #263a5a;
  --header-separator: rgba(255, 255, 255, 0.1);
  --brand-accent: #7ec3ff;
  --nav-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98));
  --nav-panel-border: rgba(51, 65, 85, .95);
  --nav-link-bg: rgba(30, 41, 59, .72);
  --nav-link-border: rgba(51, 65, 85, .78);
  --nav-link-color: #e5e7eb;
  --nav-mobile-separator: rgba(51, 65, 85, .9);
  --menu-toggle-bg: rgba(30, 41, 59, .92);
  --menu-toggle-border: rgba(96, 165, 250, .38);
  --menu-toggle-color: #e5e7eb;
  --menu-toggle-active-bg: rgba(37, 99, 235, .9);
  --menu-toggle-active-border: rgba(147, 197, 253, .75);

  /* Buttons */
  --btn-bg: #22365a;
  --btn-border: #355078;
  --btn-text: #ffffff;
  --btn-primary-bg: #2f7fff;
  --btn-primary-text: #ffffff;

  /* Misc UI */
  --thumb-placeholder-border: rgba(255, 255, 255, 0.22);
  --sticky-bg: #091426;

  /* Mobile cards */
  --mobile-card-bg: #121e34;
  --mobile-card-border: #2d3f5c;

  /* Status colors */
  --status-ok-border: rgba(34, 197, 94, .42);
  --status-ok-bg: rgba(34, 197, 94, .14);
  --status-ok-text: #c9ffd8;

  --status-warn-border: rgba(245, 158, 11, .45);
  --status-warn-bg: rgba(245, 158, 11, .15);
  --status-warn-text: #ffe7b3;

  --status-bad-border: rgba(239, 68, 68, .45);
  --status-bad-bg: rgba(239, 68, 68, .15);
  --status-bad-text: #ffd0d0;
}

html[data-theme="light"] {
  color-scheme: light;

  /* Base backgrounds */
  --bg: #eef2f7;
  --card: #ffffff;

  /* Text */
  --fg: #0b1324;
  --muted: #334155;
  --muted-2: #475569;
  --label: #25344d;

  /* Main accent */
  --accent: #2563eb;
  --accent-contrast: #ffffff;

  /* Borders */
  --border: #b8c4d4;
  --border-2: #94a3b8;

  /* Surfaces */
  --surface: #e2e8f0;
  --surface-2: #ffffff;
  --surface-3: #f1f5f9;
  --surface-4: #d7e0ed;

  /* Shadows & focus */
  --shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.16);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* Header */
  --header-bg: #ffffff;
  --header-border: #b8c4d4;
  --header-separator: rgba(23, 32, 51, 0.12);
  --brand-accent: #1d4ed8;
  --nav-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .98));
  --nav-panel-border: rgba(203, 213, 225, .95);
  --nav-link-bg: rgba(241, 245, 249, .82);
  --nav-link-border: rgba(203, 213, 225, .9);
  --nav-link-color: #172033;
  --nav-mobile-separator: rgba(203, 213, 225, .95);
  --menu-toggle-bg: rgba(241, 245, 249, .94);
  --menu-toggle-border: rgba(37, 99, 235, .28);
  --menu-toggle-color: #172033;
  --menu-toggle-active-bg: rgba(37, 99, 235, .12);
  --menu-toggle-active-border: rgba(37, 99, 235, .55);

  /* Buttons */
  --btn-bg: #ffffff;
  --btn-border: #94a3b8;
  --btn-text: #0b1324;
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;

  /* Misc UI */
  --thumb-placeholder-border: rgba(23, 32, 51, 0.22);
  --sticky-bg: #f5f7fb;

  /* Mobile cards */
  --mobile-card-bg: #ffffff;
  --mobile-card-border: #d8e0ec;

  /* Status colors */
  --status-ok-border: rgba(22, 163, 74, .34);
  --status-ok-bg: rgba(22, 163, 74, .11);
  --status-ok-text: #166534;

  --status-warn-border: rgba(217, 119, 6, .34);
  --status-warn-bg: rgba(217, 119, 6, .12);
  --status-warn-text: #92400e;

  --status-bad-border: rgba(220, 38, 38, .34);
  --status-bad-bg: rgba(220, 38, 38, .11);
  --status-bad-text: #991b1b;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}