/* Design tokens: palette, spacing, radii, motion, typography. */
:root {
  /* Core palette */
  --color-primary: #2563eb;
  --color-primary-soft: #dbeafe;
  --color-accent: #4f46e5;

  --color-income: #16a34a;
  --color-income-soft: #dcfce7;
  --color-expense: #dc2626;
  --color-expense-soft: #fee2e2;

  --color-success: #22c55e;
  --color-success-soft: #ecfdf3;
  --color-warning: #facc15;
  --color-warning-soft: #fef9c3;
  --color-danger: #ef4444;
  --color-danger-soft: #fee2e2;

  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-soft: #94a3b8;

  --color-border: rgba(148, 163, 184, 0.4);
  --color-border-strong: rgba(148, 163, 184, 0.7);

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;

  /* Spacing (8-pt base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadows */
  --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 16px 32px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.24);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-border: rgba(71, 85, 105, 0.5);
  --color-border-strong: rgba(71, 85, 105, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}