/*
 * Ryze report kit: the agency's own brand for the reports it hands to clients (monthly search reports, audits,
 * performance reviews, as HTML and PDF). Load after kits/base/tokens.css, with the Exo 2 font link in README.md.
 *
 * Source of truth: the agency's shipped client reports (the -ryze HTML and PDF reports, as of 2026-09-03): Ryze
 * blue #0028fe, ink #0d0f14, a cool page #f5f6f8, Exo 2 for everything, red #d92b3a for problems. Kept here as the reports have them, with three changes the library's rules ask for: critical
 * takes the reports' print red #c0202e (the screen red is 4.3:1 on the page, under AA); success and warning carry no
 * hue (status is a word and an icon, and only a problem is red, rulebook section 3); and a data palette that stays
 * apart for every kind of color vision (tests/kits.test.mjs). The accent is Ryze blue and is never a data series.
 *
 * Theme: a report reads light, like its PDF, so light leads and dark is a stored choice (data-theme="dark"), the way
 * the Industry Pulse kit does it: the ":root:not([data-theme='light'])" half of the first selector outranks the base
 * kit's system-dark rule.
 */

:root,
:root:not([data-theme="light"]) {
  color-scheme: light;

  --dl-surface: #f5f6f8;
  --dl-surface-raised: #ffffff;
  --dl-surface-sunken: #eceef3;
  --dl-ink: #0d0f14;
  --dl-ink-muted: #545b6f;
  --dl-ink-faint: #646b7f;
  --dl-line: #dde1ea;
  --dl-line-strong: #7d8497;

  --dl-accent: #0028fe;
  --dl-accent-strong: #001fc4;
  --dl-on-accent: #ffffff;
  --dl-accent-quiet: #eef1ff;
  --dl-critical: #c0202e;
  --dl-critical-wash: #fff0f1;
  --dl-focus-ring: #0028fe;
  --dl-focus-halo: #ffffff;
  --dl-success: var(--dl-ink-muted);
  --dl-warning: var(--dl-ink);

  --dl-shade-1: #0028fe;
  --dl-shade-2: #001fc4;
  --dl-shade-3: #0064b4;
  --dl-shade-4: #f5f6f8;

  --dl-data-1: #0064b4;
  --dl-data-2: #be8232;
  --dl-data-3: #78466e;
  --dl-data-4: #968a84;

  --dl-font-text: "Exo 2", system-ui, sans-serif;
  --dl-font-head: "Exo 2", system-ui, sans-serif;
  --dl-weight-strong: 700;
  --dl-tracking-head: -0.01em;

  --dl-radius-control: 6px;
  --dl-radius-float: 10px;
}

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

  --dl-surface: #12151c;
  --dl-surface-raised: #1a1e27;
  --dl-surface-sunken: #0d1016;
  --dl-ink: #eef0f5;
  --dl-ink-muted: #b2b8c8;
  --dl-ink-faint: #8f96a8;
  --dl-line: #2a3040;
  --dl-line-strong: #6f7790;

  --dl-accent: #8a9cff;
  --dl-accent-strong: #aebaff;
  --dl-on-accent: #0a0f2e;
  --dl-accent-quiet: #1c2240;
  --dl-critical: #f07a84;
  --dl-critical-wash: #3a1a1f;
  --dl-focus-ring: #eef0f5;
  --dl-focus-halo: #12151c;

  --dl-shade-1: #8a9cff;
  --dl-shade-2: #aebaff;
  --dl-shade-3: #14a0fa;
  --dl-shade-4: #12151c;

  --dl-data-1: #14a0fa;
  --dl-data-2: #be7832;
  --dl-data-3: #a078aa;
  --dl-data-4: #b4c0ba;

  --dl-shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
  --dl-shadow-tray: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 48px rgb(0 0 0 / 0.5);
}