/* Design tokens — SINGLE source of truth for the J6 design system.
   Every color/spacing/type value used by site.css comes from here.
   The a11y checker (scripts/check_j6_a11y.py) parses the hex values
   below and verifies the WCAG 2.2 AA contrast pairs listed in
   docs/J6-DESIGN-SYSTEM.md. Do not hardcode colors in site.css. */
:root {
  /* Color — surfaces and text */
  --color-bg: #ffffff;
  --color-surface: #f2f5f8;
  --color-surface-strong: #e4ebf1;
  --color-ink: #16222d;
  --color-ink-muted: #44586a;
  --color-border: #b9c7d2;
  /* Color — brand and actions (brand hue is a token, not the brand name) */
  --color-primary: #0b5cad;
  --color-primary-dark: #084a8a;
  --color-on-primary: #ffffff;
  /* Color — semantics */
  --color-positive: #0e7a3d;
  --color-on-positive: #ffffff;
  --color-warning-bg: #fdf3e0;
  --color-warning-ink: #6f4400;
  --color-warning-border: #d9a441;
  --color-danger: #b3261e;
  /* Color — stacked bar segments (always paired with text values) */
  --bar-net: #0e7a3d;
  --bar-federal: #0b5cad;
  --bar-fica: #b3540a;
  --bar-state: #5a54c4;
  --bar-local: #8a6d1a;
  --bar-other: #5f7182;
  --bar-wages: #33566e;
  --bar-benefits: #2e7d6b;
  --bar-pretax: #a03d7c;
  /* Typography — system stack only (zero webfont weight, budget rule) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height: 1.55;
  /* Spacing — 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  /* Shape */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --shadow-card: 0 1px 3px rgba(22, 34, 45, 0.14);
  --shadow-raised: 0 6px 18px rgba(22, 34, 45, 0.16);
  /* Focus — visible on every interactive element (WCAG 2.2 AA) */
  --focus-outline: 3px solid #0b5cad;
  --focus-offset: 2px;
  /* Layout */
  --content-max: 72rem;
}