/*
Subject list:
1. Name: QA29 Budget Planner (fictional QA interactive budget calculator).
2. Neighborhood / Context: Personal household & monthly budget tracking in Malaysia (RM - Ringgit Malaysia).
3. Materials: Bank statement ledger, crisp receipt slips, ballpoint pen ink, clean warm accounting paper.
4. Numbers: Monthly net income, itemized categorized expenses, running total, live net balance in RM.
5. Ritual: Payday allocation, entering utility bills, grocer runs, rent, checking whether you're in the green or overspending before month's end.
6. Constraint: Offline local storage on device only; zero backend, no sign-in, works cleanly on 390px mobile up to desktop with full keyboard accessibility.
7. Tone: Calm, precise, human, reassuring without cheerleading or jargon.
8. The printed thing: An accounting ledger sheet with balanced debit/credit columns and a clear bottom-line stamp.

The Idea:
On this site, an accounting ledger sheet becomes a live balance-sheet instrument where every expense adjustment immediately updates the bottom-line tally in Ringgit Malaysia, warning clearly if spending overtakes income.
*/

:root {
  /* Palette: 6 core colors (ground, ink, accent + 3 supporting) */
  --color-ground: #f6f5f0;
  --color-ink: #191c1b;
  --color-accent: #0f5132;        /* Forest green for healthy surplus & primary action */
  --color-danger: #a51d24;        /* Deep red for overspend warning & destructive actions */
  --color-surface: #ffffff;       /* Ledger paper white */
  --color-muted: #5e6561;         /* Ledger column metadata & notes */

  /* Derived tints with color-mix */
  --color-surface-soft: color-mix(in oklch, var(--color-ink) 4%, var(--color-surface));
  --color-surface-danger: color-mix(in oklch, var(--color-danger) 8%, var(--color-surface));
  --color-surface-surplus: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
  --color-border: color-mix(in oklch, var(--color-ink) 14%, var(--color-surface));
  --color-border-danger: color-mix(in oklch, var(--color-danger) 30%, var(--color-surface));

  /* Type scale */
  --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-body: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Corner decisions: clean, disciplined square corners */
  --radius: 0px;
}