/* ── Design Tokens ─────────────────────────────────────────────────────────
   Single source of truth for colors, type, spacing, shadows, and animation.
   Load this before all other stylesheets.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Primary palette (navy blues) ───────────────────────────────────── */
  --color-primary-950:       #001535;   /* hero backgrounds */
  --color-primary-900:       #002046;   /* navbar */
  --color-primary-800:       #0a3060;   /* status bar */
  --color-primary-container: #1b365d;   /* dropdown panels, hover states */
  --color-primary-500:       #46699d;   /* links, icons, accents */
  --color-primary-100:       #d6eaff;   /* light tints */
  --color-primary-50:        #f8faff;   /* table headers, toolbar tint */

  /* ── Neutrals ────────────────────────────────────────────────────────── */
  --color-on-background:     #111d23;   /* primary body text */
  --color-background:        #f4faff;   /* page background */
  --color-neutral-800:       #1e293b;   /* darkest slate text */
  --color-neutral-700:       #334155;   /* dark slate text */
  --color-neutral-600:       #475569;   /* strong secondary text */
  --color-neutral-500:       #475569;   /* secondary text, labels */
  --color-neutral-450:       #64748b;   /* muted text */
  --color-neutral-400:       #94a3b8;   /* placeholder, disabled */
  --color-neutral-300:       #cbd5e1;   /* strong borders */
  --color-neutral-200:       #e2e8f0;   /* borders */
  --color-neutral-100:       #f1f5f9;   /* page surface */
  --color-surface:           #f8fafc;   /* card backgrounds */
  --color-surface-card:      #ffffff;   /* elevated card backgrounds */
  --color-surface-low:       #e9f6fd;   /* mobile menu, hover tints */
  --color-surface-highest:   #d7e4ec;   /* accent backgrounds */
  --color-outline-variant:   #c4c6cf;   /* subtle borders */

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --color-primary-600:       #2563a8;   /* bright link blue */
  --color-success:           #1a7f4b;   /* passed bills, positive states */
  --color-success-700:       #166534;
  --color-success-500:       #22c55e;
  --color-success-100:       #dcfce7;
  --color-danger:            #dc2626;   /* failed/vetoed, destructive */
  --color-danger-700:        #b91c1c;
  --color-danger-800:        #991b1b;
  --color-danger-900:        #7f1d1d;
  --color-danger-100:        #fee2e2;
  --color-warning:           #f59e0b;
  --color-accent-gold:       #fbbf24;   /* civic gold accent */
  --color-info-600:          #2563eb;
  --color-info-200:          #bfdbfe;
  --color-info-100:          #dbeafe;

  /* ── Type scale (fluid via clamp) ───────────────────────────────────── */
  --text-4xl:  clamp(1.875rem, 4vw, 2.5rem);     /* page heroes */
  --text-3xl:  clamp(1.375rem, 2.5vw, 1.75rem);  /* section headings */
  --text-2xl:  clamp(1.125rem, 1.8vw, 1.375rem); /* card titles */
  --text-xl:   1.25rem;                            /* large body, sub-heads */
  --text-base: 1.125rem;                           /* body */
  --text-md:   1rem;                               /* dense body */
  --text-sm:   0.9375rem;                          /* metadata, labels */
  --text-caption: 0.875rem;                        /* table meta, captions */
  --text-xs:   0.8125rem;                          /* eyebrows, tags */
  --text-2xs:  0.7rem;                             /* smallest kickers (10.4px floor) */

  /* ── Line height ─────────────────────────────────────────────────────── */
  --leading-tight:   1.2;   /* headings */
  --leading-snug:    1.35;  /* card titles, dense rows */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;  /* long-form prose */

  /* ── Breakpoints (reference for @media — keep to these four) ─────────
     phone ≤480px · large-phone ≤640px · tablet ≤768px · desktop ≥1024px */

  /* ── Spacing (4px base unit) ─────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);

  /* ── Animation ───────────────────────────────────────────────────────── */
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  350ms;
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Hero gradient shared by all page heroes */
  --hero-gradient: linear-gradient(135deg, var(--color-primary-950) 0%, var(--color-primary-900) 55%, #1b365d 100%);
  --hero-glow:     radial-gradient(ellipse 55% 90% at 15% 50%, rgba(37,99,168,0.22) 0%, transparent 70%);
}