/* ============================================================
   MuniPro Design System — Token Sheet
   Adapted from BondGov's visual language, re-keyed to Blue.
   ============================================================ */

:root {
  /* ── Primary (Blue) ─────────────────────────────────────── */
  --mp-primary-900: #0A2540;   /* Darkest — footer, CTA bands */
  --mp-primary-800: #0D3158;   /* Nav bar, hero background    */
  --mp-primary-700: #0F4A82;   /* Headings, links, buttons    */
  --mp-primary-600: #1A5FA0;   /* Hover states                */
  --mp-primary-500: #2574BF;   /* Active / focus rings        */
  --mp-primary-400: #4A93D4;   /* Lighter interactive         */
  --mp-primary-300: #7FB5E3;   /* Tags, badges               */
  --mp-primary-200: #B3D4F0;   /* Light tints, card accents   */
  --mp-primary-100: #E0EEF9;   /* Section backgrounds         */
  --mp-primary-50:  #F0F7FC;   /* Subtle wash                 */

  /* ── Accent (Gold) — carried over from BondGov ──────────── */
  --mp-accent-600:  #B8862B;   /* Dark gold — hover           */
  --mp-accent-500:  #D4A64A;   /* Primary gold — numbers, tags*/
  --mp-accent-400:  #ECC97A;   /* Light gold — highlights     */
  --mp-accent-300:  #F5DFA6;   /* Soft gold — backgrounds     */
  --mp-accent-100:  #FBF3DC;   /* Gold wash                   */

  /* ── Neutrals ───────────────────────────────────────────── */
  --mp-neutral-900: #111827;   /* Body text                   */
  --mp-neutral-800: #1F2937;   /* Secondary headings          */
  --mp-neutral-700: #374151;   /* Paragraph text              */
  --mp-neutral-600: #4B5563;   /* Captions                    */
  --mp-neutral-500: #6B7384;   /* Muted / meta text           */
  --mp-neutral-400: #9CA3AF;   /* Placeholders                */
  --mp-neutral-300: #D1D5DB;   /* Borders                     */
  --mp-neutral-200: #E5E7EB;   /* Dividers                    */
  --mp-neutral-100: #F3F4F6;   /* Card backgrounds            */
  --mp-neutral-50:  #F9FAFB;   /* Page background alt         */

  /* ── Warm Backgrounds (from BondGov's cream palette) ────── */
  --mp-warm-bg:     #F7F4EB;   /* Primary page background     */
  --mp-warm-bg-alt: #FAFAF6;   /* Alternating section bg      */
  --mp-warm-card:   rgba(255,255,255,0.55); /* Frosted card   */

  /* ── Semantic ───────────────────────────────────────────── */
  --mp-success:     #10B981;
  --mp-warning:     #F59E0B;
  --mp-error:       #EF4444;
  --mp-info:        var(--mp-primary-500);

  /* ── Typography ─────────────────────────────────────────── */
  --mp-font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --mp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mp-font-mono:    "JetBrains Mono", "Fira Code", monospace;

  /* Scale (desktop) */
  --mp-text-xs:    0.75rem;    /* 12px */
  --mp-text-sm:    0.875rem;   /* 14px */
  --mp-text-base:  1rem;       /* 16px */
  --mp-text-lg:    1.125rem;   /* 18px */
  --mp-text-xl:    1.25rem;    /* 20px */
  --mp-text-2xl:   1.5rem;     /* 24px */
  --mp-text-3xl:   1.875rem;   /* 30px */
  --mp-text-4xl:   2.25rem;    /* 36px */
  --mp-text-5xl:   2.75rem;    /* 44px — h2 */
  --mp-text-6xl:   3.75rem;    /* 60px */
  --mp-text-7xl:   4.5rem;     /* 72px — h1 hero */

  /* ── Spacing ────────────────────────────────────────────── */
  --mp-space-1:  0.25rem;
  --mp-space-2:  0.5rem;
  --mp-space-3:  0.75rem;
  --mp-space-4:  1rem;
  --mp-space-5:  1.25rem;
  --mp-space-6:  1.5rem;
  --mp-space-8:  2rem;
  --mp-space-10: 2.5rem;
  --mp-space-12: 3rem;
  --mp-space-16: 4rem;
  --mp-space-20: 5rem;
  --mp-space-24: 6rem;

  /* ── Borders & Radii ────────────────────────────────────── */
  --mp-radius-sm:  4px;
  --mp-radius-md:  8px;
  --mp-radius-lg:  12px;
  --mp-radius-xl:  16px;
  --mp-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --mp-shadow-sm:  0 1px 2px rgba(10,37,64,0.05);
  --mp-shadow-md:  0 4px 6px rgba(10,37,64,0.07);
  --mp-shadow-lg:  0 10px 25px rgba(10,37,64,0.10);
  --mp-shadow-xl:  0 20px 50px rgba(10,37,64,0.14);

  /* ── Layout ─────────────────────────────────────────────── */
  --mp-max-width:    1200px;
  --mp-nav-height:   72px;
  --mp-section-pad:  var(--mp-space-24) var(--mp-space-6);
}