/* DarBudget — design tokens
   Single source of truth. Nothing below this file should hardcode a value.
   Font: Instrument Sans (Google Fonts) — see design-system.md §Type. */

:root {
  /* ---------- surface & ink ---------- */
  --ground:            #F6F4EF;  /* app background, "paper" */
  --surface:           #FFFFFF;  /* cards, tables, drawers */
  --surface-sunken:    #FCFBF8;  /* inputs, recessed wells */
  --surface-month:     #F8F4EB;  /* the currently-selected month column */
  --surface-hover:     #FBFAF7;  /* row hover */

  --ink:               #16130E;  /* primary text, primary button fill */
  --ink-secondary:     #56514A;  /* supporting text, secondary button label */
  --ink-muted:         #8C877D;  /* captions, column headers, disabled */
  --ink-inverse:       #FFFFFF;
  --ink-hover:         #2A251D;  /* primary button hover */

  --border:            #E8E4DB;  /* table header rule, card edge */
  --border-strong:     #E0DBD1;  /* ghost button, input at rest */
  --border-input:      #E4DFD5;
  --hairline:          #F6F4EF;  /* row separators inside white cards */
  --hairline-soft:     #F7F5F1;  /* list separators, lighter */

  /* ---------- semantic status ----------
     Each has a foreground (text/glyph) and a tint (pill/row background). */
  --on-track:          #1F6B49;
  --on-track-soft:     #3A6B55;  /* same meaning, lower emphasis text */
  --on-track-tint:     #EBF2EC;

  --over-budget:       #A32B1C;
  --over-budget-tint:  #FAEDE7;

  --low-stock:         #8A5A16;
  --low-stock-tint:    #FBF0DE;

  --out-of-stock:      #A32B1C;  /* reuses over-budget red by intent */
  --out-of-stock-tint: #FAEDE7;

  --no-budget:         #8C877D;  /* "no target set" — absence, not a warning */
  --no-budget-tint:    #F4F2ED;

  --reached:           #1F6B49;  /* goal reached */
  --reached-tint:      #EBF2EC;

  --scope-business:    #8A5F1E;  /* the business/villa scope chip */
  --scope-business-tint:#F6EBD8;
  --accent:            #B07B2C;  /* sort arrows, small emphasis marks */

  /* ---------- category groups ----------
     Six groups. Every category inherits its group's colour and glyph.
     Mapping: assets/README.md */
  --cat-maison:            #B07B2C;  --cat-maison-tint:        #F8F0E1;
  --cat-alimentation:      #3F7A55;  --cat-alimentation-tint:  #EAF1EC;
  --cat-transport:         #46709A;  --cat-transport-tint:     #E9EEF5;
  --cat-enfants:           #A2585F;  --cat-enfants-tint:       #F8ECED;
  --cat-personnel:         #7A6796;  --cat-personnel-tint:     #F1EEF6;
  --cat-villa:             #B5642C;  --cat-villa-tint:         #FAEEE4;
  --cat-fallback:          #8C877D;  --cat-fallback-tint:      #F4F2ED;

  /* ---------- store palette ----------
     Assigned by stable hash of store name, not fixed per store. */
  --store-1: #46709A;  --store-1-tint: #E9EEF5;
  --store-2: #3F7A55;  --store-2-tint: #EAF1EC;
  --store-3: #B5642C;  --store-3-tint: #FAEEE4;
  --store-4: #7A6796;  --store-4-tint: #F1EEF6;
  --store-5: #A2585F;  --store-5-tint: #F8ECED;
  --store-6: #B07B2C;  --store-6-tint: #F8F0E1;

  /* ---------- type ---------- */
  --font-sans:  'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;   /* auth headline only */

  --fs-hero:    38px;  --lh-hero:   1;      /* hero KPI amount */
  --fs-title:   19px;  --lh-title:  1.15;   /* page / card title */
  --fs-lead:    15px;  --lh-lead:   1.4;    /* drawer intro, prose */
  --fs-body:    14px;  --lh-body:   1.45;
  --fs-dense:   13px;  --lh-dense:  1.25;   /* table cells, list rows */
  --fs-control: 12.5px;                     /* button labels */
  --fs-input:   16px;                       /* inputs — prevents iOS zoom */
  --fs-caption: 12px;  --lh-caption:1.35;   /* supporting notes */
  --fs-micro:   11px;                       /* pills, badges */
  --fs-label:   10px;                       /* uppercase micro-labels, nav */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --ls-tight:   -0.02em;   /* titles */
  --ls-hero:    -0.045em;  /* hero amounts */
  --ls-label:    0.04em;   /* uppercase micro-labels */

  /* ---------- spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  11px;
  --sp-5:  14px;
  --sp-6:  18px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  44px;

  /* ---------- radii ---------- */
  --r-xs:   6px;   /* micro pill */
  --r-sm:   7px;   /* category tile, small chip */
  --r-md:   11px;  /* button, input, listbox option */
  --r-lg:   18px;  /* content card — the default */
  --r-xl:   20px;  /* hero KPI card, FAB */
  --r-full: 999px;

  /* ---------- elevation ---------- */
  --shadow-card:    0 1px 2px rgba(22,19,14,.05), 0 3px 10px rgba(22,19,14,.06);
  --shadow-raised:  0 3px 8px rgba(22,19,14,.10), 0 14px 32px -8px rgba(22,19,14,.26);
  --shadow-popover: 0 6px 14px rgba(22,19,14,.08), 0 22px 48px -12px rgba(22,19,14,.22);
  --shadow-drawer:  0 -8px 40px rgba(22,19,14,.18);

  /* ---------- borders ---------- */
  --bw: 1px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);

  /* ---------- motion ---------- */
  --dur-fast:   140ms;
  --dur-base:   160ms;
  --dur-slow:   180ms;
  --dur-drawer: 260ms;
  --ease:       cubic-bezier(.2,.8,.2,1);

  /* ---------- z layers ----------
     Deliberately sparse. Nothing may invent a value between these. */
  --z-base:     0;
  --z-sticky-col: 3;   /* sticky first column inside a table */
  --z-sticky-th:  4;   /* sticky table header (must beat the column) */
  --z-header:   30;    /* app header */
  --z-filters:  20;    /* filter bar, sits BELOW the header */
  --z-nav:      30;    /* bottom nav */
  --z-fab:      50;
  --z-drawer-scrim: 60;
  --z-drawer:   61;
  --z-toast:    80;
  --z-popover: 200;    /* listbox / calendar, rendered at the app root */

  /* ---------- layout ---------- */
  --header-h:    56px;
  --filters-h:   52px;
  --nav-h:       60px;
  --tap-min:     44px;  /* never smaller on touch */
  --content-max: 1160px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-drawer: 0ms;
  }
}