/* TransparentBudget design tokens.
 * Single source of truth for color, spacing, type, and radii.
 * Sheets and pages reference values via var(--token) so theming
 * stays one-file deep.
 */
:root {
  /* Brand and semantic colors */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;

  --color-success: #059669;
  --color-success-soft: #ecfdf5;

  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;

  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;

  /* Budget bucket colors (use across budget mix bar, pills, legends) */
  --color-needs: #059669;    /* green */
  --color-wants: #d97706;    /* amber */
  --color-savings: #2563eb;  /* blue */

  /* Neutral surface and ink */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-ink: #0f172a;
  --color-ink-muted: #475569;
  --color-ink-soft: #64748b;
  --color-ink-faint: #94a3b8;

  /* Spacing scale (4-pt rhythm).
   * Mid-tier sizes use clamp() so vertical rhythm tightens on phones
   * (e.g. --space-lg drops 24 -> 20, --space-xl 32 -> 28 at ~375px) without
   * any media query. Floors are ~70% of desktop values. xs/sm stay fixed. */
  --space-xs: 0.25rem;                            /* 4 */
  --space-sm: 0.5rem;                             /* 8 */
  --space-md: clamp(0.75rem, 2.6vw, 1rem);        /* 12 -> 16 */
  --space-lg: clamp(1.25rem, 4vw, 1.5rem);        /* 20 -> 24 */
  --space-xl: clamp(1.75rem, 5vw, 2rem);          /* 28 -> 32 */
  --space-2xl: clamp(2rem, 6vw, 3rem);            /* 32 -> 48 */

  /* Radii */
  --radius-sm: 0.5rem;     /* 8 */
  --radius-md: 0.75rem;    /* 12 */
  --radius-lg: 1rem;       /* 16 */
  --radius-xl: 1.5rem;     /* 24 */
  --radius-pill: 9999px;

  /* Type families */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segment UI Emoji", sans-serif;
  --font-display: var(--font-body);

  /* Type scale (helpers; pages mostly use Tailwind utilities) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Layout rhythm shared across calculator pages.
   * --section-gap and --card-pad shrink on phones so cards don't waste
   * vertical real-estate. --grid-gap stays fixed because it only matters
   * at >= 1024px where the calc-grid actually splits into columns. */
  --page-max-width: 64rem;                          /* matches max-w-5xl */
  --page-gutter: 1rem;
  --page-gutter-md: 2rem;
  --grid-gap: 2rem;                                 /* space between sidebar/main on desktop */
  --section-gap: clamp(1rem, 3.5vw, 1.5rem);        /* 16 -> 24 */
  --card-pad: clamp(1rem, 3.5vw, 1.5rem);           /* 16 -> 24, drops to ~16 < 640px */
  --card-pad-sm: clamp(0.75rem, 2.6vw, 1rem);       /* 12 -> 16 */

  /* Shadows */
  --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-card-hover: 0 4px 16px -6px rgb(15 23 42 / 0.12);
}