/* Design Tokens — single source of truth for the OBBBA dashboard
   Palette aligned with Budget Explorer (Tailwind-based) for
   a unified "Visualize Policy" design language.               */
:root {
    /* ── Brand colors ────────────────────────────────────── */
    --color-heading:        #1e3a5f;
    --color-heading-alt:    #374151;
    --color-primary:        #2563eb;
    --color-primary-hover:  #1d4ed8;
    --color-primary-dark:   #1e3a5f;
    --color-loss:           #dc2626;
    --color-gain:           #16a34a;
    --color-success:        #16a34a;
    --color-highlight:      #FFD700;

    /* Neutrals (Tailwind gray scale) */
    --color-body-bg:        #f9fafb;
    --color-surface:        #ffffff;
    --color-text:           #374151;
    --color-text-muted:     #6b7280;
    --color-text-faint:     #9ca3af;
    --color-border:         #e5e7eb;
    --color-border-light:   #f3f4f6;
    --color-border-hover:   #e5e7eb;

    /* Overlays */
    --color-overlay:        rgba(0, 0, 0, 0.7);
    --color-overlay-light:  rgba(0, 0, 0, 0.5);
    --color-tooltip-bg:     rgba(0, 0, 0, 0.9);
    --color-border-tooltip: rgba(255, 255, 255, 0.2);

    /* Alert / info */
    --color-alert-bg:       #fff3cd;
    --color-alert-border:   #ffc107;
    --color-tour-highlight: #fff3cd;

    /* Focus ring */
    --color-focus-ring:     rgba(37, 99, 235, 0.15);

    /* ── Typography ──────────────────────────────────────── */
    --font-family:          'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:            'Courier New', monospace;

    --font-size-xs:         12px;
    --font-size-sm:         13px;
    --font-size-base:       14px;
    --font-size-md:         15px;
    --font-size-lg:         16px;
    --font-size-xl:         20px;
    --font-size-2xl:        28px;

    /* ── Spacing ─────────────────────────────────────────── */
    --space-2xs:            4px;
    --space-xs:             5px;
    --space-sm:             8px;
    --space-md:             10px;
    --space-lg:             12px;
    --space-xl:             15px;
    --space-2xl:            20px;
    --space-3xl:            25px;
    --space-4xl:            30px;
    --space-5xl:            40px;

    /* ── Radii ───────────────────────────────────────────── */
    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            8px;
    --radius-xl:            12px;
    --radius-pill:          50%;
    --radius-sheet:         16px;  /* bottom-sheet on mobile */

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm:            0 1px 5px rgba(0, 0, 0, 0.1);
    --shadow-md:            0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl:            0 10px 40px rgba(0, 0, 0, 0.3);

    /* ── Z-indices ───────────────────────────────────────── */
    --z-search-results:     500;
    --z-info-card:          800;
    --z-tooltip:            1000;
    --z-welcome:            2000;
    --z-tour-highlight:     2999;
    --z-tour:               3000;
    --z-tour-modal:         3001;
    --z-tour-arrow:         3002;
    --z-popup:              4000;

    /* ── Layout ──────────────────────────────────────────── */
    --content-max-width:    960px;

    /* ── Touch-target minimums (WCAG) ────────────────────── */
    --touch-min:            44px;

    /* ── Additional colors ──────────────────────────────── */
    --color-text-dark:      #111827;
    --color-text-body:      #374151;
    --color-surface-hover:  #f3f4f6;
    --color-surface-active: #eff6ff;
    --color-dot-hover:      #93c5fd;
    --color-tour-highlight-bg: #fff3cd;
    --color-no-data:        #f3f4f6;
    --color-highlight-glow: rgba(255, 215, 0, 0.6);

    /* ── Transitions ─────────────────────────────────────── */
    --transition-fast:      0.2s;
    --transition-med:       0.3s;
    --color-tour-arrow:     #ffffff;
}