/* Theme: Sage (light, default). Earthy forest sage and warm sand.
   Text colours meet WCAG AA contrast. Every theme defines the same variables. */
:root {
  color-scheme: light;
  --app: #F7F6F2;
  --card: #FFFFFF;
  --ink: #26332F;
  --ink-2: #66716C;         /* 4.7:1 on --app */
  --hair: #ECEAE4;
  --primary: #3F5D53;       /* fills with white text: 7.3:1 */
  --primary-2: #557468;     /* white text 5.1:1 */
  --primary-ink: #3F5D53;   /* primary as text or icon on --card / --app */
  --chart: #3F5D53;         /* bars in charts */
  --accent: #D9C2A3;        /* large text on --primary only */
  --accent-soft: #F3EADC;
  --mist: #E4EBEA;
  --ok: #6E9C7A;            /* bars and dots, not small text */
  --ok-soft: #E3EDE5;
  --over: #C4674F;
  --over-soft: #F2B8A8;     /* overspent bar on --primary */
  --track: rgba(38, 51, 47, .08);
  --dim: #C9C6BE;           /* placeholder digits */
  --tab-off: #66716C;       /* 4.9:1 on the tab bar */
  --bar-bg: rgba(255, 255, 255, .92);
  --toast-bg: #26332F;
  --toast-ink: #FFFFFF;
  --toast-action: #D9C2A3;
  --backdrop: rgba(28, 36, 33, .38);
  --shadow: 0 1px 2px rgba(38, 51, 47, .05), 0 6px 18px rgba(38, 51, 47, .06);
  --shadow-bar: 0 8px 26px rgba(38, 51, 47, .14);
  --shadow-lift: 0 10px 24px rgba(63, 93, 83, .28);

  /* Category slots: tile background / icon circle */
  --cat1-bg: #E6EEE7; --cat1: #6E9C7A;
  --cat2-bg: #F6E8DA; --cat2: #D49A62;
  --cat3-bg: #E3EBEF; --cat3: #6F93A6;
  --cat4-bg: #F0E8DF; --cat4: #A9826A;
  --cat5-bg: #ECEAE4; --cat5: #8C8A80;
  --cat6-bg: #F3E5E4; --cat6: #C27C7C;
  --cat7-bg: #E2EEEC; --cat7: #5E9C94;
  --cat8-bg: #F5EDD6; --cat8: #C9A548;
  --cat9-bg: #EBE8EF; --cat9: #8C82A8;
}