/** * Design tokens for Finance X. * Light mode is default; dark mode activates via [data-theme="dark"] on , * set by the Settings module and persisted in the `settings` store. */ :root { --color-bg: #f8fafc; --color-surface: #ffffff; --color-text: #0f172a; --color-text-muted: #64748b; --color-border: #e2e8f0; --color-primary: #2563eb; --color-income: #16a34a; --color-expense: #dc2626; --color-warning: #d97706; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Every money figure in the app renders in this tabular ledger face — the one deliberate signature detail that gives Finance X a distinct, "financial instrument" feel instead of looking like a generic form app. */ --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); } [data-theme='dark'] { --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; }