/*
 * Meaningful color: severity, status and trend direction.
 *
 * These colors carry meaning and are reserved for it:
 *   - red (critical, high) and yellow (medium, medium-low) mean severity or a bad outcome,
 *     never "series 4"; the categorical chart palette contains no red or yellow
 *   - green means good or on target
 *   - blue is informational and neutral
 *   - gray means no data or unknown
 * Color is never the only signal. Badges carry an icon and a label, and trends carry an
 * arrow and a signed value.
 *
 * Per level:
 *   --tdk-sev-<level>       solid, for marks (chart fills, dots, gauge bands, icons)
 *   --tdk-sev-<level>-bg    tint, for badge and callout backgrounds
 *   --tdk-sev-<level>-text  text on the tint (>= 4.5:1)
 *   --tdk-sev-<level>-on    text on the solid
 */

:root {
  --tdk-sev-critical: #b42318;
  --tdk-sev-critical-bg: #fdeceb;
  --tdk-sev-critical-text: #8e1b12;
  --tdk-sev-critical-on: #ffffff;

  --tdk-sev-high: #e0482f;
  --tdk-sev-high-bg: #fdeee9;
  --tdk-sev-high-text: #9c2d17;
  /* Dark text: white on this orange-red is 4.1:1, under the 4.5:1 small text needs. */
  --tdk-sev-high-on: #0b0b0c;

  --tdk-sev-medium: #fdc302;
  --tdk-sev-medium-bg: #fff7d6;
  --tdk-sev-medium-text: #6b5100;
  --tdk-sev-medium-on: #30333a;

  --tdk-sev-medium-low: #fde58a;
  --tdk-sev-medium-low-bg: #fffbea;
  --tdk-sev-medium-low-text: #6b5a10;
  --tdk-sev-medium-low-on: #30333a;

  --tdk-sev-low: #2e8540;
  --tdk-sev-low-bg: #e9f5ec;
  --tdk-sev-low-text: #1f6130;
  --tdk-sev-low-on: #ffffff;

  --tdk-sev-info: #1078c0;
  --tdk-sev-info-bg: #e7f1fa;
  --tdk-sev-info-text: #0b5a91;
  --tdk-sev-info-on: #ffffff;

  --tdk-sev-none: #8a929b;
  --tdk-sev-none-bg: #eff0f3;
  --tdk-sev-none-text: #4f545c;
  --tdk-sev-none-on: #15171b;

  /* Trend direction x polarity: text on the card surface (>= 4.5:1) */
  --tdk-trend-good: #2e8540;
  --tdk-trend-bad: #b42318;
  --tdk-trend-neutral: var(--tdk-color-text-muted);
}

:root[data-theme='dark'] {
  --tdk-sev-critical: #f26b5b;
  --tdk-sev-critical-bg: rgb(242 107 91 / 0.16);
  --tdk-sev-critical-text: #ffb4aa;
  --tdk-sev-critical-on: #1f2126;

  --tdk-sev-high: #ff8c5a;
  --tdk-sev-high-bg: rgb(255 140 90 / 0.16);
  --tdk-sev-high-text: #ffc2a6;
  --tdk-sev-high-on: #1f2126;

  --tdk-sev-medium: #fdc302;
  --tdk-sev-medium-bg: rgb(253 195 2 / 0.14);
  --tdk-sev-medium-text: #ffe07a;
  --tdk-sev-medium-on: #1f2126;

  --tdk-sev-medium-low: #f2d97a;
  --tdk-sev-medium-low-bg: rgb(242 217 122 / 0.12);
  --tdk-sev-medium-low-text: #f6e6a8;
  --tdk-sev-medium-low-on: #1f2126;

  --tdk-sev-low: #4fb36a;
  --tdk-sev-low-bg: rgb(79 179 106 / 0.16);
  --tdk-sev-low-text: #a6e3b5;
  --tdk-sev-low-on: #1f2126;

  --tdk-sev-info: #3995df;
  --tdk-sev-info-bg: rgb(57 149 223 / 0.16);
  --tdk-sev-info-text: #a9d3f5;
  --tdk-sev-info-on: #1f2126;

  --tdk-sev-none: #8a929b;
  --tdk-sev-none-bg: rgb(138 146 155 / 0.16);
  --tdk-sev-none-text: #c9cdd3;
  --tdk-sev-none-on: #1f2126;

  --tdk-trend-good: #4fb36a;
  --tdk-trend-bad: #f26b5b;
}