/*
 * Indepth design tokens.
 *
 * Chart colours are the validated data-viz palette: categorical slots blue /
 * orange / aqua / yellow (adjacent-pair CVD and normal-vision floors pass in
 * both modes against these exact surfaces), a single-hue blue ordinal ramp, and
 * a reserved status palette that is never used for a series.
 */

:root {
  color-scheme: light;

  /* Brand — a fixed navy console chrome, identical in both themes. */
  --brand-900: #0c1633;
  --brand-800: #12224a;
  --brand-700: #1a3068;
  --brand-600: #24408c;
  --brand-500: #2f57b8;
  --brand-400: #6f96e8;
  --brand-ink: #ffffff;

  /* Surfaces & ink */
  --page: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --border: #e3e7ee;
  --border-strong: #cfd6e2;
  --text-1: #101828;
  --text-2: #4a5567;
  --text-3: #8b95a7;
  --link: #24408c;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 18px 40px rgba(12, 22, 51, 0.16);

  /* Categorical series (light) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  /* Single-hue ordinal ramp (light) */
  --ramp-1: #86b6ef;
  --ramp-2: #5598e7;
  --ramp-3: #2a78d6;
  --ramp-4: #184f95;

  /* Chart chrome */
  --chart-surface: #ffffff;
  --grid: #e6e9ef;
  --axis: #cdd3de;
  --area-opacity: 0.1;

  /* Status — reserved, never a series colour */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --good-bg: #e7f6e8;
  --good-text: #0a6b16;
  --warning-bg: #fdf2d8;
  --warning-text: #7a5300;
  --serious-bg: #fdece3;
  --serious-text: #8f3d17;
  --critical-bg: #fdeaea;
  --critical-text: #98211f;
  --info-bg: #e9eefb;
  --info-text: #1f3b85;
  --neutral-bg: #eef1f6;
  --neutral-text: #46516b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --sidebar-width: 256px;
  --topbar-height: 68px;
}

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

  --brand-900: #0a0f1c;
  --brand-800: #101828;
  --brand-700: #182238;

  --page: #0e1117;
  --surface: #161a23;
  --surface-2: #1b202b;
  --surface-3: #212736;
  --border: #262d3b;
  --border-strong: #333c4d;
  --text-1: #f1f4fa;
  --text-2: #a9b4c6;
  --text-3: #7c879a;
  --link: #7ea8ef;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);

  /* Same four hues, re-stepped for the dark surface and re-validated. */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;

  --ramp-1: #cde2fb;
  --ramp-2: #86b6ef;
  --ramp-3: #3987e5;
  --ramp-4: #184f95;

  --chart-surface: #161a23;
  --grid: #242b39;
  --axis: #333c4d;
  --area-opacity: 0.14;

  --good-bg: rgba(12, 163, 12, 0.16);
  --good-text: #63d463;
  --warning-bg: rgba(250, 178, 25, 0.16);
  --warning-text: #f2c04f;
  --serious-bg: rgba(236, 131, 90, 0.16);
  --serious-text: #f0a483;
  --critical-bg: rgba(208, 59, 59, 0.18);
  --critical-text: #f08b8b;
  --info-bg: rgba(57, 135, 229, 0.16);
  --info-text: #8fb8f2;
  --neutral-bg: rgba(255, 255, 255, 0.07);
  --neutral-text: #b3bdcd;
}