/* ============================================================
   tokens.css — design-system foundation (Phase 2)
   Single source of spacing, radius, touch-target, color, type.
   Everything else should reference these, so the redesign is
   systematic instead of whack-a-mole.
   ============================================================ */

:root {
    /* spacing — 4pt scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    /* radius */
    --radius-sm: 10px;
    --radius-card: 16px;
    --radius-pill: 999px;

    /* touch targets */
    --tap-min: 44px;   /* every interactive control */
    --tap-kid: 56px;   /* kid-mode primary CTAs */

    /* brand + mode accents */
    --c-brand-1: #4f46e5;
    --c-brand-2: #06b6d4;
    --c-kid-accent: #7c3aed;
    --c-parent-accent: #0ea5e9;

    /* semantic money — never hard-code greens/reds for amounts */
    --c-income: #16a34a;
    --c-deduction: #dc2626;

    /* surfaces + text */
    --c-bg: #f4f7fb;
    --c-surface: #ffffff;
    --c-border: #e5e7eb;
    --c-text: #1f2937;
    --c-text-strong: #111827;
    --c-text-muted: #64748b;

    /* type */
    --font-display: clamp(1.5rem, 5vw, 2.25rem);

    /* shell geometry */
    --topbar-h: 64px;
    --tabbar-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* elevation */
    --shadow-card: 0 10px 26px rgba(15, 23, 42, 0.08);
    --shadow-pop: 0 -8px 30px rgba(15, 23, 42, 0.16);
}

/* Semantic money helpers — use these everywhere amounts render. */
.money-income { color: var(--c-income); }
.money-deduction { color: var(--c-deduction); }
.money { font-variant-numeric: tabular-nums; font-weight: 800; }