/* ─────────────────────────────────────────────────────────────────────────────
   tokens.css — the "Ledger" design system's values (docs/design-system.md
   §1–§3). Every colour, size and radius a JOINED screen uses comes from here;
   no hex and no px font-size anywhere else once a screen has joined.

   Loaded FIRST on every page (index.html, login.html, mobile.html), before
   style.css, so the old tokens at the bottom resolve to the new values.
   Light theme only. The colour block is the one a dark theme would redefine.
   ───────────────────────────────────────────────────────────────────────────── */

/* §2 — IBM Plex Sans, IBM's own Latin1 + Latin2 split woff2 (@ibm/plex-sans
   1.1.0, unmodified), 400/500/600. Replaces IBMPlexSans-latin-wght.woff2,
   which was the latin-EXTENDED slice: it had no A–Z and no digits, so every
   desktop word fell back to Arial from v5.15.1 until this file. The
   unicode-ranges are IBM's (css/ibm-plex-sans-all.css). Licence: OFL 1.1,
   public/fonts/LICENSE-IBM-Plex-Sans.txt. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexSans-Medium-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexSans-SemiBold-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }

:root {
  /* ── §1 Colour ─────────────────────────────────────────────────────────── */
  --brand:             #0b6fc2;   /* THE action colour: primary button, active nav, focus ring, selected chip border */
  --brand-tint:        #e3f0fb;   /* selected chip / tender background, info banners */
  --brand-text:        #0a5a9e;   /* text and links on light backgrounds, text on --brand-tint */
  --brand-text-strong: #084a82;   /* link hover */
  --sidebar:           #1e293b;   /* sidebar and phone header */
  --sidebar-text:      #cbd5e1;
  --sidebar-muted:     #94a3b8;
  --sidebar-border:    #334155;
  --sidebar-avatar:    #475569;
  --bg:                #f4f6f8;
  --surface:           #ffffff;
  --surface-2:         #fafbfc;   /* table header row, dialog footer */
  --inset:             #eef1f4;   /* row dividers, neutral badge, image placeholders */
  --border:            #dde3ea;
  --text:              #1b2733;
  --muted:             #5a6b7b;   /* 5.9:1 on white — replaces #718096 */
  --disabled-text:     #9aa8b8;
  --ok:                #167a3d;
  --ok-tint:           #e4f5ea;
  --warn:              #7a4b00;
  --warn-tint:         #fff7e6;
  --warn-border:       #f5d79a;   /* the trial / approval banner's edge (Pos, PhoneHome boards) */
  --danger:            #b42318;
  --danger-tint:       #fdecea;
  --toast-bg:          #1b2733;
  --toast-text:        #ffffff;
  --toast-ok-icon:     #6ee7a0;
  --toast-error-icon:  #ff8a80;
  --chart-1:           #0b6fc2;
  --on-brand:          #ffffff;   /* text and icons on a --brand fill */
  --scrim:             rgba(27, 39, 51, 0.45);   /* behind a modal */

  /* ── §2 Type ───────────────────────────────────────────────────────────── */
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
  /* desktop scale; .ui-phone below carries the phone column */
  --text-meta:        12px;
  --text-secondary:   13px;
  --text-body:        14px;
  --text-card-title:  16px;
  --text-page-title:  20px;
  --text-total:       24px;
  --text-money-cta:   17px;   /* §4: a money-carrying primary label is 600 at 17–18 */
  --text-nav:         13px;   /* phone bottom-bar label */
  --text-emphasis:    15px;   /* the boards: header shop name, POS "Total" label, login field and button */
  --text-headline:    28px;   /* the Login board's headline */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --leading:          1.45;

  /* ── §3 Space and shape ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --radius-sm:      4px;    /* chart bars, kbd hints */
  --radius-control: 6px;    /* buttons, inputs, nav items */
  --radius-card:    8px;    /* cards, tables */
  --radius-modal:   10px;   /* modals, phone cards and buttons */
  --radius-badge:   10px;   /* §4 .badge */
  --radius-chip:    16px;   /* chips are round */
  --border-width:   1px;
  --focus-width:    2px;
  --shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.25);
  --control-h:      36px;   /* desktop button / input */
  --cta-h:          52px;   /* the Collect bar */
  --target-min:     44px;   /* phone: every interactive element, one rule in ui.css */
  --icon:           20px;
  --icon-sidebar:   18px;
  --icon-nav:       22px;
  --icon-sm:        16px;
}

/* Phone column of §2, as ruled 2026-10-26: the phone floor is 13 px — meta and
   secondary are 13, never 12; bottom-bar labels 13 on 22 px icons. */
:root.ui-phone {
  --text-meta:        13px;
  --text-secondary:   13px;
  --text-body:        16px;
  --text-card-title:  16px;
  --text-page-title:  18px;
  --text-total:       28px;
  --text-money-cta:   18px;
  --leading:          1.4;
  --control-h:        48px;
}

/* ── The 40 old tokens (style.css :root until v5.105.0), aliased ─────────────
   They stay defined so an UNJOINED screen keeps rendering; each now resolves
   to its Ledger value, which is why an unjoined screen's colours move (the
   old green accent becomes the brand blue) while nothing on it moves. Five
   share their name with a new token (--bg --surface --border --text --danger)
   and are defined above. A joined screen uses only the names above this
   block. Removed when the last screen joins. */
:root {
  --surface2:      var(--surface-2);
  --border2:       var(--border);
  --text1:         var(--text);
  --text2:         var(--muted);
  --text3:         var(--muted);
  --accent:        var(--brand);
  --accent-light:  var(--brand-tint);
  --accent-hover:  var(--brand-text);
  --blue:          var(--brand-text);
  --blue-light:    var(--brand-tint);
  --orange:        var(--warn);
  --orange-light:  var(--warn-tint);
  --red:           var(--danger);
  --red-light:     var(--danger-tint);
  --purple:        var(--brand-text);
  --purple-light:  var(--brand-tint);
  --green:         var(--ok);
  --green-light:   var(--ok-tint);
  --radius:        var(--radius-card);
  --shadow:        0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, .1);
  --fs-title:      var(--text-page-title);
  --fs-section:    var(--text-card-title);
  --fs-label:      var(--text-secondary);
  --fs-body:       var(--text-body);
  --focus-ring:    0 0 0 var(--focus-width) var(--brand);
  /* layout, not look — unchanged values under the no-moves rule */
  --sidebar-w:            224px;
  --sidebar-collapsed-w:  52px;
  --sidebar-transition:   .2s ease;
  --sp-1:                 8px;
  --sp-2:                 16px;
  --sp-3:                 24px;
  --sp-4:                 32px;
  --input-h:              38px;
  --input-radius:         var(--radius-control);
}