:root {
  /* 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;

  /* Buttons */
  --btn-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;
}

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