/* Spectrum CrossCheck · design tokens, v2.1 "Kochi, calm" (u3-foundation, 16 Oct 2026). The one source every lane uses.
   Light only: the client asked for no dark mode. Rule: colour carries money status and nothing else (red = money on hold,
   amber = a person must look); everything that is not a status is ink on paper. v1's token names stay, each pointing at
   its v2.1 value, so every page re-skins; v2.1's own names are the source where both name one thing. */

/* ---------- fonts: self-hosted, SIL OFL 1.1 (licences and how they were made in fonts/README.txt) ---------- */
@font-face { font-family: "Mona Sans"; src: url('fonts/mona-sans-latin-var.woff2') format('woff2');
  font-weight: 400 750; font-stretch: 90% 115%; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+2009-200A, U+202F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2032-2033,
                 U+2039-203A, U+20B9, U+2190-2193, U+2212, U+2713; }
/* English only (the client asked): Mona Sans is the one webfont. A name or note a person typed in another script falls
   through Mona Sans (Latin only) to the font the phone or PC itself draws that script with. */

:root {
  color-scheme: light;

  /* ---- ground and paper (v2.1) ---- */
  --ground: #F3F6F4;        /* the map's land */
  --canvas: #F3F6F5;        /* the page behind the work */
  --paper: #FFFFFF;         /* cards, drawers, sheets, tables */
  --paper-2: #F7F9F8;       /* quiet panels, table hover */
  --paper-3: #EEF2F0;       /* pressed, the current tab, track */
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .9);
  --wash: 243, 246, 244;    /* the map land's rgb, for fades and the map labels' halo */
  --glaze: radial-gradient(900px 380px at 12% -10%, rgba(26, 174, 88, .07), transparent 70%),
           radial-gradient(800px 420px at 92% -20%, rgba(80, 140, 220, .06), transparent 70%);
  --scrim: rgba(8, 20, 22, .2);

  /* ---- ink ---- */
  --ink: #0C1A1D;           /* text, primary buttons */
  --ink-2: #33433F;         /* secondary text */
  --ink-3: #4F5E5B;         /* meta text, table heads (4.5:1 on every paper) */
  --ink-4: #8A9693;         /* decorative only: chevrons, operators (under 4.5:1, never text a person must read) */
  --ink-5: #C3CCC9;         /* decorative only: closed outlines */
  --on-ink: #FFFFFF;        /* text on an ink button */
  --line: rgba(12, 26, 29, .075);   /* hairlines between rows */
  --line-2: rgba(12, 26, 29, .13);  /* tracks, quiet rings */
  --line-3: rgba(12, 26, 29, .22);  /* dividers that must show, the zero line */
  --line-strong: #7F8B88;   /* a control's edge: inputs, selects, checkboxes (3:1 on paper and canvas) */
  --focus: #6B7577;         /* the focus ring: v2.1's 2 px ring 2 px off the control (outline, so forced colours keep it) */
  --link: var(--ink);
  --selection: rgba(26, 174, 88, .22);

  /* ---- the pharmacy cross: lit = nothing to do there ---- */
  --lit: #1AAE58; --lit-hi: #45D985; --lit-deep: #0F8C45; --lit-tint: #E6F6EC;
  --brand: #0F7F43;
  --unlit: #DCE6E2; --unlit-edge: #A9BAB4;

  /* ---- the money-status language (v2.1): word colour · fill (marks, chips, bars) · tint (backgrounds) · ring ---- */
  --hold: #B3202F;    --hold-fill: #D33142;   --hold-tint: #FCEDEE;   --hold-ring: rgba(211, 49, 66, .55);
  --check: #8C5400;   --check-fill: #EFA01C;  --check-tint: #FFF4DE;  --check-ring: rgba(239, 160, 28, .7);
  --wait: #2453B5;    --wait-fill: #3D6FDB;   --wait-tint: #ECF1FC;
  --ok: #137A46;      --ok-fill: #0F8C45;     --ok-tint: #E8F5EC;
  --paid: #6230C4;    --paid-fill: #7A45E0;   --paid-tint: #F2ECFD;
  --refused: #262C31; --refused-fill: #3A4247; --refused-tint: #EEF0F1;

  /* v1's family names, kept for every page (one source: the v2.1 tokens above):
     word · tint (-bg) · tint edge (-line) · chip fill (-solid) · text on the chip (-on) · edge (-edge) · mark (-mark) */
  --hold-bg: var(--hold-tint);       --hold-line: #F3C3C8;   --hold-solid: var(--hold-fill);       --hold-on: #FFFFFF;
  --hold-edge: var(--hold-fill);     --hold-mark: var(--hold-fill);
  --check-bg: var(--check-tint);     --check-line: #F2D29A;  --check-solid: var(--check-fill);     --check-on: #2A1A00;
  --check-edge: #B57400;             --check-mark: #B57400;  --check-glyph: #3A2400;
  --wait-bg: var(--wait-tint);       --wait-line: #C2D2F2;   --wait-solid: var(--wait-fill);       --wait-on: #FFFFFF;
  --wait-edge: var(--wait-fill);     --wait-mark: var(--wait-fill);
  --ok-bg: var(--ok-tint);           --ok-line: #B5DEC3;     --ok-solid: var(--ok);                --ok-on: #FFFFFF;
  --ok-edge: var(--ok-fill);         --ok-mark: var(--ok-fill);
  --paid-bg: var(--paid-tint);       --paid-line: #D6C6F6;   --paid-solid: var(--paid-fill);       --paid-on: #FFFFFF;
  --paid-edge: var(--paid-fill);     --paid-mark: var(--paid-fill);
  --refused-bg: var(--refused-tint); --refused-line: #C4CACD; --refused-solid: var(--refused);     --refused-on: #FFFFFF;
  --refused-edge: var(--refused-fill); --refused-mark: var(--refused-fill);
  /* the chart kit's quiet series (matched lines, history) */
  --cell-ok: #CDD7D4; --series: var(--ink-3); --series-quiet: #A9B9B5;

  /* the avatars' soft tints (who has it, without competing colour) */
  --av-bg: #E4ECF4; --av-ink: #26476A; --av-s-bg: #EEE8F7; --av-s-ink: #5A3C8C; --av-a-bg: #F5ECDF; --av-a-ink: #7A4D1C;

  /* ---- surfaces: v1's names ---- */
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);

  /* ---- type: Mona Sans, set wide for money (fonts/README.txt) ---- */
  --font: "Mona Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --num: proportional-nums lining-nums;      /* standalone figures and money in rows (v2.1's round-2 fix) */
  --num-tab: tabular-nums lining-nums;       /* account numbers, IFSC, bill numbers, times compared digit by digit */
  /* desk scale (the default) */
  --t-micro: 12px;  --t-meta: 13px;  --t-small: 13.5px;  --t-body: 15px;  --t-lead: 17px;
  --t-h3: 15.5px;   --t-h2: 21px;    --t-h1: 30px;       --t-figure: 26px; --t-figure-xl: 40px;
  --t-head-xl: 38px;                         /* the Overview's sentence */
  --lh-tight: 1.18; --lh-body: 1.5;  --lh-ml: 1.6;       /* a name typed in Malayalam needs the taller line */

  /* ---- space (4 px steps) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
  --gutter: 24px;
  /* ---- shape: buttons 11, cards 20, drawers and Daniel's cards 26; no pills ---- */
  --r-1: 8px; --r-2: 11px; --r-3: 16px; --r-4: 20px; --r-5: 26px;
  --edge: 3px;                               /* the current row's ink edge (no coloured slabs in v2.1) */
  /* ---- controls (desk) ---- */
  --h-control: 40px; --h-button: 42px; --h-row: 44px; --h-row-tight: 36px; --target: 24px;
  /* ---- depth: hairline + contact + ambient, cool, never a coloured glow ---- */
  --sh-1: 0 0 0 1px rgba(12, 30, 34, .055), 0 1px 2px rgba(12, 30, 34, .05);
  --sh-2: 0 0 0 1px rgba(12, 30, 34, .05), 0 2px 4px rgba(12, 30, 34, .035), 0 14px 30px -14px rgba(12, 30, 34, .18);
  --sh-3: 0 0 0 1px rgba(12, 30, 34, .06), 0 18px 40px -14px rgba(12, 30, 34, .24), 0 44px 90px -44px rgba(12, 30, 34, .32);
  --sh-press: 0 0 0 1px rgba(12, 30, 34, .1), inset 0 1px 2px rgba(12, 30, 34, .1);
  --sh-btn: 0 1px 2px rgba(12, 26, 29, .2), 0 8px 18px -8px rgba(12, 26, 29, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  --sh-btn-hover: 0 2px 4px rgba(12, 26, 29, .22), 0 12px 24px -10px rgba(12, 26, 29, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
  --sh-toast: 0 16px 36px -12px rgba(0, 0, 0, .45);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --hover-ink: rgba(12, 26, 29, .045);       /* a quiet hover on glass */
  --hover-ink-2: rgba(12, 26, 29, .06);
  --hover-paper: rgba(255, 255, 255, .7);    /* a quiet hover on the canvas */
  --toast-bg: #0F1F22; --toast-ink: #F2F7F5; --toast-link: #9BE8BC; --toast-hover: rgba(255, 255, 255, .08);
  --shadow-1: var(--sh-1);
  --shadow-pop: var(--sh-3);
  /* ---- motion: fast for feedback, slower for arrivals, a spring for objects ---- */
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 640ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067 22.3%, 1.077 24.7%, 1.067 27.5%,
                 1.003 35.1%, .986 40.2%, .996 52.4%, 1);
  --ease-stamp: cubic-bezier(.2, 1.5, .4, 1);   /* the stamp lands with a small overshoot */
  /* ---- layers ---- */
  --z-bar: 50; --z-tabbar: 60; --z-sheet: 80; --z-drawer: 81; --z-toast: 95; --z-tip: 99;
}

/* phone density: Daniel's pages and the staff app (data-density="phone" on <html>): one step up, 44-48 px targets */
:root[data-density="phone"] {
  --t-micro: 12.5px; --t-meta: 13.5px; --t-small: 14.5px; --t-body: 16.5px; --t-lead: 18px;
  --t-h3: 17px; --t-h2: 21px; --t-h1: 27px; --t-figure: 30px; --t-figure-xl: 46px;
  --gutter: 16px; --h-control: 48px; --h-button: 50px; --h-row: 56px; --h-row-tight: 48px; --target: 48px;
}

/* print: paper and black ink (tokens are unlayered, so the print values live here too) */
@media print {
  :root {
    --ground: #ffffff; --canvas: #ffffff; --paper: #ffffff; --paper-2: #ffffff; --paper-3: #ffffff; --glaze: none;
    --line: #9a9a9a; --line-2: #9a9a9a; --line-3: #777777; --line-strong: #555555;
    --ink: #000000; --ink-2: #222222; --ink-3: #444444; --on-ink: #ffffff; --focus: #000000;
    --t-body: 10.5pt; --t-small: 10pt; --t-meta: 9pt; --t-micro: 8pt; --t-h1: 16pt; --t-h2: 13pt; --t-h3: 11pt;
    --sh-1: none; --sh-2: none; --sh-3: none; --sh-btn: none; --hi: none; color-scheme: light;
  }
}

/* reduced motion: fades of 150-360 ms instead of travel; everything final within about 0.7 s */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 150ms; --dur-3: 240ms; --dur-4: 360ms; --ease-stamp: ease-out; --ease-spring: ease-out; }
}