/*
 * Karma cabinet — Material 3 color roles.
 * Light theme follows the supplied Material Blue tonal palette.
 * Dark theme is a low-glare navy derivation with WCAG-friendly text contrast.
 */
:root {
  color-scheme: light;

  --md-ref-blue-50: #e3f2fd;
  --md-ref-blue-100: #bbdefb;
  --md-ref-blue-200: #90caf9;
  --md-ref-blue-300: #64b5f6;
  --md-ref-blue-400: #42a5f5;
  --md-ref-blue-500: #2196f3;
  --md-ref-blue-600: #1e88e5;
  --md-ref-blue-700: #1976d2;
  --md-ref-blue-800: #1565c0;
  --md-ref-blue-900: #0d47a1;
  --md-ref-blue-a100: #82b1ff;
  --md-ref-blue-a200: #448aff;
  --md-ref-blue-a400: #2979ff;
  --md-ref-blue-a700: #2962ff;

  --md-sys-color-primary: #1976d2;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e3f2fd;
  --md-sys-color-on-primary-container: #0d47a1;
  --md-sys-color-secondary: #42647c;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dcecf8;
  --md-sys-color-on-secondary-container: #24475f;
  --md-sys-color-tertiary: #52658a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e1eaff;
  --md-sys-color-on-tertiary-container: #394d70;

  --md-sys-color-surface: #f7fafc;
  --md-sys-color-on-surface: #17212b;
  --md-sys-color-on-surface-variant: #536273;
  --md-sys-color-surface-dim: #dbe3eb;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f8fb;
  --md-sys-color-surface-container: #eef3f8;
  --md-sys-color-surface-container-high: #e8eef5;
  --md-sys-color-surface-container-highest: #e1e9f1;
  --md-sys-color-outline: #748395;
  --md-sys-color-outline-variant: #c7d2de;

  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success: #2f6f4f;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #d5f4e2;
  --md-sys-color-on-success-container: #123d2a;

  --md-sys-color-inverse-surface: #26313d;
  --md-sys-color-inverse-on-surface: #eef3f8;
  --md-sys-color-surface-tint: #1976d2;
  --md-sys-color-focus-ring: #1976d2;

  --cabinet-canvas: #f7fafc;
}

html.dark {
  color-scheme: dark;

  --md-sys-color-primary: #90caf9;
  --md-sys-color-on-primary: #003258;
  --md-sys-color-primary-container: #164a78;
  --md-sys-color-on-primary-container: #d7ecff;
  --md-sys-color-secondary: #b6cee8;
  --md-sys-color-on-secondary: #21364d;
  --md-sys-color-secondary-container: #203a55;
  --md-sys-color-on-secondary-container: #d9e9f8;
  --md-sys-color-tertiary: #a9c7ff;
  --md-sys-color-on-tertiary: #17325b;
  --md-sys-color-tertiary-container: #2d4770;
  --md-sys-color-on-tertiary-container: #d8e6ff;

  --md-sys-color-surface: #08111d;
  --md-sys-color-on-surface: #f2f6fa;
  --md-sys-color-on-surface-variant: #b8c5d4;
  --md-sys-color-surface-dim: #050b13;
  --md-sys-color-surface-bright: #243a59;
  --md-sys-color-surface-container-lowest: #050b13;
  --md-sys-color-surface-container-low: #0b1624;
  --md-sys-color-surface-container: #0f1c2d;
  --md-sys-color-surface-container-high: #14243a;
  --md-sys-color-surface-container-highest: #1a2c46;
  --md-sys-color-outline: #8a99aa;
  --md-sys-color-outline-variant: #35465a;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #6a2732;
  --md-sys-color-on-error-container: #ffd9dc;

  --md-sys-color-success: #8fd8b1;
  --md-sys-color-on-success: #073823;
  --md-sys-color-success-container: #1f513b;
  --md-sys-color-on-success-container: #c4f2d7;

  --md-sys-color-inverse-surface: #e8eef5;
  --md-sys-color-inverse-on-surface: #26313d;
  --md-sys-color-surface-tint: #90caf9;
  --md-sys-color-focus-ring: #90caf9;

  --cabinet-canvas: #08111d;
}