/* Signal Plane design tokens
 *
 * Components consume semantic roles from this file. The legacy aliases at the
 * end keep the current server-rendered/jQuery screens themed while they are
 * migrated to the new component vocabulary.
 */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --md-sys-color-primary: #006a6a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #9cf1f0;
  --md-sys-color-on-primary-container: #002020;
  --md-sys-color-secondary: #4a6363;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #cce8e7;
  --md-sys-color-on-secondary-container: #051f1f;
  --md-sys-color-tertiary: #405e91;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #d8e2ff;
  --md-sys-color-on-tertiary-container: #001a41;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #f7fafa;
  --md-sys-color-on-background: #171d1d;
  --md-sys-color-surface: #f7fafa;
  --md-sys-color-on-surface: #171d1d;
  --md-sys-color-surface-variant: #dbe5e4;
  --md-sys-color-on-surface-variant: #3f4949;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f5f5;
  --md-sys-color-surface-container: #ebefef;
  --md-sys-color-surface-container-high: #e5eaea;
  --md-sys-color-surface-container-highest: #dfe4e4;
  --md-sys-color-outline: #6f7979;
  --md-sys-color-outline-variant: #bec8c8;
  --md-sys-color-inverse-surface: #2b3232;
  --md-sys-color-inverse-on-surface: #ecf2f2;
  --md-sys-color-scrim: #000000;

  --signal-healthy: #176b3a;
  --signal-on-healthy: #ffffff;
  --signal-healthy-container: #d5f5df;
  --signal-on-healthy-container: #0b4322;
  --signal-warning: #7a5700;
  --signal-on-warning: #ffffff;
  --signal-warning-container: #ffe8a3;
  --signal-on-warning-container: #3f2d00;
  --signal-critical: #a6292e;
  --signal-on-critical: #ffffff;
  --signal-critical-container: #ffdadd;
  --signal-on-critical-container: #5f1118;
  --signal-info: #285ea8;
  --signal-on-info: #ffffff;
  --signal-info-container: #d8e7ff;
  --signal-on-info-container: #123d77;
  --signal-neutral: #566161;
  --signal-neutral-container: #e3e8e8;
  --signal-on-neutral-container: #303939;

  --signal-code-surface: #101718;
  --signal-code-text: #dce7e6;
  --signal-code-muted: #aebdbc;
  --signal-code-border: #344342;
  --signal-overlay: rgb(0 0 0 / 0.52);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: #80d5d4;
  --md-sys-color-on-primary: #003737;
  --md-sys-color-primary-container: #004f4f;
  --md-sys-color-on-primary-container: #9cf1f0;
  --md-sys-color-secondary: #b1cccc;
  --md-sys-color-on-secondary: #1c3535;
  --md-sys-color-secondary-container: #334b4b;
  --md-sys-color-on-secondary-container: #cce8e7;
  --md-sys-color-tertiary: #aac7ff;
  --md-sys-color-on-tertiary: #0d305f;
  --md-sys-color-tertiary-container: #274777;
  --md-sys-color-on-tertiary-container: #d8e2ff;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-background: #0e1415;
  --md-sys-color-on-background: #dee4e4;
  --md-sys-color-surface: #0e1415;
  --md-sys-color-on-surface: #dee4e4;
  --md-sys-color-surface-variant: #3f4949;
  --md-sys-color-on-surface-variant: #bec8c8;
  --md-sys-color-surface-container-lowest: #090f10;
  --md-sys-color-surface-container-low: #151b1c;
  --md-sys-color-surface-container: #1a2122;
  --md-sys-color-surface-container-high: #202728;
  --md-sys-color-surface-container-highest: #2a3132;
  --md-sys-color-outline: #899393;
  --md-sys-color-outline-variant: #3f4949;
  --md-sys-color-inverse-surface: #dee4e4;
  --md-sys-color-inverse-on-surface: #2b3232;
  --md-sys-color-scrim: #000000;

  --signal-healthy: #7dda9d;
  --signal-on-healthy: #083b1d;
  --signal-healthy-container: #113a23;
  --signal-on-healthy-container: #a2f5bd;
  --signal-warning: #f4c95d;
  --signal-on-warning: #3f2d00;
  --signal-warning-container: #443400;
  --signal-on-warning-container: #ffe08a;
  --signal-critical: #ffb3b7;
  --signal-on-critical: #650017;
  --signal-critical-container: #5c1a1e;
  --signal-on-critical-container: #ffdadd;
  --signal-info: #a9c7ff;
  --signal-on-info: #003064;
  --signal-info-container: #193a69;
  --signal-on-info-container: #d8e7ff;
  --signal-neutral: #bbc5c5;
  --signal-neutral-container: #303838;
  --signal-on-neutral-container: #d7e0df;

  --signal-code-surface: #080d0e;
  --signal-code-text: #dce7e6;
  --signal-code-muted: #aebdbc;
  --signal-code-border: #344342;
  --signal-overlay: rgb(0 0 0 / 0.68);
}

:root {
  --signal-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --signal-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --signal-type-display-size: 2rem;
  --signal-type-display-line: 2.5rem;
  --signal-type-headline-size: 1.5rem;
  --signal-type-headline-line: 2rem;
  --signal-type-title-size: 1.25rem;
  --signal-type-title-line: 1.75rem;
  --signal-type-body-size: 0.875rem;
  --signal-type-body-line: 1.25rem;
  --signal-type-label-size: 0.75rem;
  --signal-type-label-line: 1rem;

  --signal-space-1: 0.25rem;
  --signal-space-2: 0.5rem;
  --signal-space-3: 0.75rem;
  --signal-space-4: 1rem;
  --signal-space-5: 1.5rem;
  --signal-space-6: 2rem;
  --signal-space-7: 3rem;

  --signal-radius-xs: 0.25rem;
  --signal-radius-sm: 0.5rem;
  --signal-radius-md: 0.75rem;
  --signal-radius-lg: 1rem;
  --signal-radius-pill: 999px;

  --signal-elevation-1: 0 1px 2px rgb(0 0 0 / 0.12);
  --signal-elevation-2: 0 2px 6px rgb(0 0 0 / 0.16);
  --signal-elevation-3: 0 8px 24px rgb(0 0 0 / 0.20);
  --signal-duration-fast: 120ms;
  --signal-duration-standard: 180ms;
  --signal-focus-width: 3px;
  --signal-focus-offset: 2px;
  --signal-focus-ring: 0 0 0 2px var(--md-sys-color-surface), 0 0 0 4px var(--md-sys-color-primary);

  /* Temporary aliases for the pre-overhaul stylesheet. */
  --primary-bg: var(--md-sys-color-surface-container-lowest);
  --secondary-bg: var(--md-sys-color-background);
  --primary-text: var(--md-sys-color-on-surface);
  --accent-color: var(--md-sys-color-primary);
  --accent-color-hover: var(--md-sys-color-primary-container);
  --status-success: var(--signal-healthy);
  --status-warning: var(--signal-warning);
  --status-danger: var(--signal-critical);
  --border-color: var(--md-sys-color-outline-variant);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}