/* OPM dashboard design tokens. Our own custom properties; values match the LIONS dashboard's
   visual style (Justice Connection's other dashboard), a visual-style reference only (D-022).
   No LIONS rules or code are used.

   Where each family was observed:
   - Surface and ink colors, accent, hover fill, provisional ink, flag fill: shared/shared.css
   - Plot background, tooltip background: styles/shell2.css
   - Chart grid and axis-tick colors, chart palette: scripts/index.page.js, scripts/civil.page.js,
     scripts/agency.page.js (the PALETTE and RPAL arrays; values only)
   - Typeface (Ancizar Sans, Arial fallback), base size and line height, type scale: shared/shared.css;
     h2-scale 16px: styles/reading.css; h1 is the browser default 2em seen on index.html
   - Spacing, radii, shadows, page width: shared/shared.css; chart heights: styles/index.css
   - --chart-15 to --chart-18 are ours, not from LIONS (L-061): more distinct hues so the 12 component lines
     of the Components compared growth chart are all apart (CIE Lab difference of at least 20 between any two).
   Theme: LIONS has light only (no prefers-color-scheme or data-theme anywhere in its CSS, HTML
   or JS), so there is no dark theme here. */

:root {
  /* color: surfaces and ink */
  --color-bg: #fbfbfb;
  --color-panel: #ffffff;
  --color-ink: #212123;
  --color-ink-soft: #3a3b37;
  --color-muted: #6b6c68;
  --color-faint: #9a9b96;
  --color-line: #e4e4e1;
  --color-line-soft: #ececea;
  --color-line-strong: #d7d7d3;
  --color-hover: #f5f5f3;
  --color-accent: #eaf54c;
  --color-accent-ink: #212123;
  --color-on-ink: #ffffff;
  --color-provisional-ink: #846826;
  --color-flag-bg: #fff9c4;

  /* color: charts */
  --color-plot-bg: #f3f4f6; /* lightened in L-103 so ticks and labels reach 4.5:1 (was #e9ebee) */
  --color-grid: #e6e6e3;
  /* controls: a border of 3:1 or more against the panel (WCAG 1.4.11), and one shared height (L-103) */
  --color-control-border: #8a8b86;
  --control-height: 40px;
  /* administration colors on comparison charts (D-068, D-077): the same everywhere; Trump I's gold darkened to reach
     3:1 against the plot background (L-103) */
  --admin-obama2: #7a4fc0;
  --admin-trump1: #9a6f00;
  --admin-biden: #0e8a8a;
  --admin-trump2: #212123;
  /* administration bands on timelines (shading.js): ink at low opacity, alternating, Trump II a little stronger.
     The look follows the LIONS bands (ink tints alternating); values are ours (D-022). */
  --shade-1: rgba(33, 33, 35, 0.045);
  --shade-2: rgba(33, 33, 35, 0.09);
  --shade-strong: rgba(33, 33, 35, 0.15);
  --color-tooltip-bg: rgba(56, 60, 66, 0.97);
  --chart-1: #212123;
  --chart-2: #2a78d6;
  --chart-3: #d9622b;
  --chart-4: #1d9e75;
  --chart-5: #7a4fc0;
  --chart-6: #c02d5a;
  --chart-7: #0e8a8a;
  --chart-8: #b8860b;
  --chart-9: #5a6acf;
  --chart-10: #c23b8a;
  --chart-11: #7a7b76;
  --chart-12: #2f9e44;
  --chart-13: #e06a2b;
  --chart-14: #3b6fd4;
  --chart-15: #8a5a44;
  --chart-16: #7a8b24;
  --chart-17: #f08a7e;
  --chart-18: #5ac8e8;
  --chart-other: #8a8b86;

  /* type */
  --font-sans: 'Ancizar Sans', Arial, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.5;
  --font-size-2xs: 11px;    /* control labels, uppercase */
  --font-size-xs: 11.5px;   /* notes, flags */
  --font-size-sm: 12px;     /* legend, footer */
  --font-size-sm2: 12.5px;
  --font-size-md: 13px;
  --font-size-body: 14px;
  --font-size-nav: 14.5px;
  --font-size-control: 15px;
  --font-size-h2: 16px;
  --font-size-kpi: 25px;
  --font-size-kpi-big: 31px;
  --font-size-h1: 28px;
  --letter-spacing-caps: 0.04em;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 22px;
  --space-10: 44px;

  /* shape */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --border: 1px solid var(--color-line);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-raise: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.14);
  --focus-ring: 2px solid var(--color-ink);

  /* layout */
  --page-max: 1120px;
  --page-gutter: 16px;
  --chart-height: 320px;
  --chart-height-sm: 260px;
}