/*
 * American Debt Guide design tokens: the single source of truth.
 * Three layers: primitive (raw values) -> semantic (purpose) -> component.
 * Components use semantic/component tokens only, never primitives or raw hex.
 * Documented in design-system/MASTER.md. Every text/background pair used below
 * was checked against WCAG AA; see MASTER.md "Contrast".
 * Everything is prefixed --adg- so nothing collides with GeneratePress variables.
 */

:root {
  /* ── Layer 1: primitives ─────────────────────────────────────────── */

  /* Navy: brand. 800 is the existing header color. */
  --adg-navy-50: #F3F5FA;
  --adg-navy-100: #E4E9F4;
  --adg-navy-200: #C8D2E8;
  --adg-navy-300: #9EB0D4;
  --adg-navy-500: #3B5BA5;
  --adg-navy-600: #2F4884;
  --adg-navy-700: #253A6A;
  --adg-navy-800: #1B2A4A;
  --adg-navy-900: #131E36;

  /* Teal: action (buttons, links, focus). "The way out." */
  --adg-teal-50: #EEF8F7;
  --adg-teal-100: #D3EFEC;
  --adg-teal-200: #A6DFD9;
  --adg-teal-600: #0F766E;
  --adg-teal-700: #0F6B64;
  --adg-teal-800: #0D5550;

  /* Orange: chart series 2 only. */
  --adg-orange-500: #D9692B;

  /* Neutral: cool gray tuned to the navy. */
  --adg-gray-0: #FFFFFF;
  --adg-gray-50: #F5F7FA;
  --adg-gray-100: #EDF0F4;
  --adg-gray-200: #DCE1E8;
  --adg-gray-300: #C2C9D3;
  --adg-gray-400: #8A94A6;
  --adg-gray-500: #6A7486;
  --adg-gray-550: #5F6878;
  --adg-gray-600: #4D5668;
  --adg-gray-700: #394151;
  --adg-gray-800: #252C38;
  --adg-gray-900: #151A23;

  /* Status: reserved meaning, always paired with icon + label. */
  --adg-green-50: #ECF7EF;
  --adg-green-200: #B6DFC2;
  --adg-green-500: #0CA30C;
  --adg-green-700: #1B6E3A;
  --adg-amber-50: #FEF6E4;
  --adg-amber-200: #F5D48F;
  --adg-amber-400: #FAB219;
  --adg-amber-800: #8A4B00;
  --adg-red-50: #FCEDED;
  --adg-red-200: #F2BCBC;
  --adg-red-500: #D03B3B;
  --adg-red-600: #B42318;
  --adg-red-700: #A12525;

  /* Type. System fonts only: zero font downloads, fastest load, and no request
     to a third-party font host (fits "nothing is sent"). */
  --adg-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --adg-font-serif: ui-serif, Georgia, "Noto Serif", "Times New Roman", serif;

  --adg-text-xs: 0.8125rem;   /* 13px */
  --adg-text-sm: 0.875rem;    /* 14px */
  --adg-text-base: 1.0625rem; /* 17px */
  --adg-text-md: 1.1875rem;   /* 19px */
  --adg-text-lg: 1.375rem;    /* 22px */
  --adg-text-xl: 1.625rem;    /* 26px */
  --adg-text-2xl: 2rem;       /* 32px */
  --adg-text-3xl: clamp(2rem, 1.6rem + 2vw, 2.5rem); /* 32-40px */

  --adg-weight-regular: 400;
  --adg-weight-semibold: 600;
  --adg-weight-bold: 700;

  --adg-leading-tight: 1.2;
  --adg-leading-snug: 1.35;
  --adg-leading-body: 1.65;

  /* Space: 4px base. */
  --adg-space-1: 0.25rem;
  --adg-space-2: 0.5rem;
  --adg-space-3: 0.75rem;
  --adg-space-4: 1rem;
  --adg-space-5: 1.25rem;
  --adg-space-6: 1.5rem;
  --adg-space-8: 2rem;
  --adg-space-10: 2.5rem;
  --adg-space-12: 3rem;
  --adg-space-16: 4rem;

  --adg-radius-sm: 4px;
  --adg-radius-md: 6px;
  --adg-radius-lg: 10px;
  --adg-radius-full: 9999px;

  --adg-shadow-sm: 0 1px 2px rgb(27 42 74 / 0.06);
  --adg-shadow-md: 0 2px 4px rgb(27 42 74 / 0.06), 0 6px 16px rgb(27 42 74 / 0.08);

  --adg-duration-fast: 150ms;
  --adg-duration-normal: 200ms;

  /* ── Layer 2: semantic ───────────────────────────────────────────── */

  --adg-color-bg: var(--adg-gray-0);
  --adg-color-bg-subtle: var(--adg-gray-50);
  --adg-color-bg-brand: var(--adg-navy-800);
  --adg-color-bg-brand-subtle: var(--adg-navy-50);

  --adg-color-text: var(--adg-gray-900);
  --adg-color-text-secondary: var(--adg-gray-600);
  --adg-color-text-muted: var(--adg-gray-550);
  --adg-color-text-on-brand: var(--adg-gray-0);
  --adg-color-text-on-brand-muted: var(--adg-navy-200);
  --adg-color-heading: var(--adg-navy-800);

  --adg-color-border: var(--adg-gray-200);
  --adg-color-border-strong: var(--adg-gray-400); /* form controls: 3:1 on white */

  --adg-color-action: var(--adg-teal-700);
  --adg-color-action-hover: var(--adg-teal-800);
  --adg-color-action-subtle: var(--adg-teal-50);
  --adg-color-link: var(--adg-teal-700);
  --adg-color-link-hover: var(--adg-teal-800);
  --adg-color-focus: var(--adg-teal-600);

  --adg-color-error: var(--adg-red-600);

  --adg-color-good-bg: var(--adg-green-50);
  --adg-color-good-border: var(--adg-green-200);
  --adg-color-good-mark: var(--adg-green-500);
  --adg-color-good-text: var(--adg-green-700);
  --adg-color-warning-bg: var(--adg-amber-50);
  --adg-color-warning-border: var(--adg-amber-200);
  --adg-color-warning-mark: var(--adg-amber-400);
  --adg-color-warning-text: var(--adg-amber-800);
  --adg-color-critical-bg: var(--adg-red-50);
  --adg-color-critical-border: var(--adg-red-200);
  --adg-color-critical-mark: var(--adg-red-500);
  --adg-color-critical-text: var(--adg-red-700);
  --adg-color-info-bg: var(--adg-navy-50);
  --adg-color-info-border: var(--adg-navy-200);
  --adg-color-info-text: var(--adg-navy-800);

  /* Charts (validated with the dataviz palette checker: CVD ΔE 23.4, normal ΔE 31.2). */
  --adg-chart-surface: var(--adg-gray-0);
  --adg-chart-series-1: var(--adg-navy-500);   /* snowball */
  --adg-chart-series-2: var(--adg-orange-500); /* avalanche */
  --adg-chart-reference: var(--adg-gray-500);  /* minimums-only "current path", dashed */
  --adg-chart-grid: var(--adg-gray-200);
  --adg-chart-axis: var(--adg-gray-550);

  --adg-font-body: var(--adg-font-sans);
  --adg-font-heading: var(--adg-font-serif);
  --adg-font-ui: var(--adg-font-sans);

  --adg-measure: 68ch;        /* prose line length */
  --adg-width-tool: 960px;    /* tools can run wider than prose */
  --adg-gutter: var(--adg-space-4);
  --adg-tap-target: 44px;

  /* ── Layer 3: component ──────────────────────────────────────────── */

  --adg-btn-bg: var(--adg-color-action);
  --adg-btn-bg-hover: var(--adg-color-action-hover);
  --adg-btn-fg: var(--adg-color-text-on-brand);
  --adg-btn-radius: var(--adg-radius-md);
  --adg-btn-pad-y: var(--adg-space-3);
  --adg-btn-pad-x: var(--adg-space-5);

  --adg-input-bg: var(--adg-color-bg);
  --adg-input-border: var(--adg-color-border-strong);
  --adg-input-radius: var(--adg-radius-md);
  --adg-input-pad: var(--adg-space-2) var(--adg-space-3);

  --adg-card-bg: var(--adg-color-bg);
  --adg-card-border: var(--adg-color-border);
  --adg-card-radius: var(--adg-radius-lg);
  --adg-card-pad: var(--adg-space-5);
  --adg-card-shadow: var(--adg-shadow-sm);

  --adg-stat-value-size: var(--adg-text-xl);
  --adg-verdict-accent: var(--adg-color-action);
}