/*
 * The Tech9IQ role tokens (tech9-ui.css, the Ops Console's UI kit), light and dark: the same
 * --t9-* roles as the IBM Power, AWS, Azure and IBM Cloud modules. <html data-theme> is set by
 * /t9-theme.js from the shared t9_theme cookie (light | dark | system; the OS when unset).
 */
:root {
  --t9-bg-page: #f8fafc;
  --t9-bg-surface: #ffffff;
  --t9-bg-muted: #f8fafc;
  --t9-bg-sunken: #f1f5f9;
  --t9-border: #e2e8f0;
  --t9-border-control: #cbd5e1;
  --t9-text: #0f172a;
  --t9-text-title2: #1e293b;
  --t9-text-body: #334155;
  --t9-text-muted: #475569;
  --t9-text-secondary: #64748b;
  --t9-text-faint: #94a3b8;
  --t9-text-ghost: #cbd5e1;
  --t9-primary: #4c6575;
  --t9-primary-hover: #3d525f;
  --t9-on-primary: #ffffff;
  --t9-link: #4c6575;
  --t9-selected-bg: #eef4f7;
  --t9-selected-text: #3d525f;
  --t9-focus: #46c4f2;
  --t9-accent: #46c4f2;
  --t9-overlay: rgba(15, 23, 42, 0.55);
  --t9-shadow-card: 0 2px 8px rgba(44, 62, 80, 0.08);
  --t9-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Status: icon/edge colour, soft fill, and text on the soft fill. */
  --t9-good: #3a7a3b;
  --t9-good-soft: #d5edd5;
  --t9-critical: #c0392b;
  --t9-critical-soft: #fce8e6;
  --t9-warn: #8a5b10;
  --t9-warn-soft: #fef5e0;
  --t9-info: #1a7aa8;
  --t9-info-soft: #d0eef9;
  --t9-banner-red-bg: #fef2f2;
  --t9-banner-red-line: #fecaca;
  --t9-banner-red-text: #b91c1c;
  --t9-banner-amber-bg: #fffbeb;
  --t9-banner-amber-line: #fde68a;
  --t9-banner-amber-text: #b45309;
  --t9-banner-sky-bg: #f0f9ff;
  --t9-banner-sky-line: #bae6fd;
  --t9-banner-sky-text: #0369a1;

  /* Charts (tech9-ui.css's light set). */
  --t9-chart-1: #3b82f6;
  --t9-chart-2: #10b981;
  --t9-chart-3: #f59e0b;
  --t9-chart-4: #ef4444;
  --t9-chart-5: #8b5cf6;
  --t9-chart-6: #06b6d4;
  --t9-chart-7: #ec4899;
  /* Series in the brand palette (§8.1): steel blues, the accent, tints. */
  --t9-series-1: #4c6575;
  --t9-series-2: #46c4f2;
  --t9-series-3: #3d525f;
  --t9-series-4: #98b7c7;
  --t9-series-5: #212c33;
  --t9-series-6: #6ed2f5;
  --t9-series-7: #7a9eb2;
  --t9-chart-grid: #e2e8f0;
  --t9-chart-tick: #64748b;
  --t9-chart-tooltip-bg: #ffffff;
  --t9-chart-tooltip-border: #e2e8f0;
  --t9-chart-tooltip-text: #0f172a;
  --t9-chart-track: #e2e8f0;

  /* The logo: the dark variant only in the dark. */
  --t9-logo-light-display: block;
  --t9-logo-dark-display: none;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --t9-bg-page: #05080b;
  --t9-bg-surface: #0d1217;
  --t9-bg-muted: #05080b;
  --t9-bg-sunken: #141b22;
  --t9-border: #2b373f;
  --t9-border-control: #3a4853;
  --t9-text: #edf3f6;
  --t9-text-title2: #d5dee4;
  --t9-text-body: #b7c1c9;
  --t9-text-muted: #a3b2bc;
  --t9-text-secondary: #8798a4;
  --t9-text-faint: #6f828f;
  --t9-text-ghost: #44535f;
  --t9-primary: #3d7491;
  --t9-primary-hover: #4a86a5;
  --t9-on-primary: #ffffff;
  --t9-link: #68d2f5;
  --t9-selected-bg: #121e26;
  --t9-selected-text: #8fdcf7;
  --t9-focus: #46c4f2;
  --t9-accent: #46c4f2;
  --t9-overlay: rgba(0, 0, 0, 0.66);
  --t9-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --t9-shadow-lg: 0 22px 70px rgba(0, 0, 0, 0.34);

  --t9-good: #9dd49e;
  --t9-good-soft: #1c2d27;
  --t9-critical: #f08b80;
  --t9-critical-soft: #2f1a1c;
  --t9-warn: #f7c063;
  --t9-warn-soft: #2f2618;
  --t9-info: #86d9f6;
  --t9-info-soft: #13293a;
  --t9-banner-red-bg: #2a1719;
  --t9-banner-red-line: #4f2124;
  --t9-banner-red-text: #fca5a5;
  --t9-banner-amber-bg: #2a2115;
  --t9-banner-amber-line: #574016;
  --t9-banner-amber-text: #fcd34d;
  --t9-banner-sky-bg: #0f2230;
  --t9-banner-sky-line: #164a64;
  --t9-banner-sky-text: #7dd3fc;

  --t9-chart-1: #60a5fa;
  --t9-chart-2: #34d399;
  --t9-chart-3: #fbbf24;
  --t9-chart-4: #f87171;
  --t9-chart-5: #a78bfa;
  --t9-chart-6: #22d3ee;
  --t9-chart-7: #f472b6;
  --t9-series-1: #7a9eb2;
  --t9-series-2: #46c4f2;
  --t9-series-3: #b7ced9;
  --t9-series-4: #4f88a6;
  --t9-series-5: #d6e4ee;
  --t9-series-6: #8fdcf7;
  --t9-series-7: #5b788a;
  --t9-chart-grid: #222d36;
  --t9-chart-tick: #8798a4;
  --t9-chart-tooltip-bg: #141b22;
  --t9-chart-tooltip-border: #2b373f;
  --t9-chart-tooltip-text: #edf3f6;
  --t9-chart-track: #222d36;

  --t9-logo-light-display: none;
  --t9-logo-dark-display: block;
}