/* Baemingo brand tokens v4 (brand hub, handbook/brand). Owner: designer.
   One brand, two UI languages. Shared tokens in :root; the POS and the back office
   each add their own layer under [data-ui="pos"] and [data-ui="bo"].
   Light by default; [data-theme="dark"] on <html>. Contrast ratios are against --surface unless noted. */

@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF}

:root {
  /* surfaces: neutral, slightly cool. No beige, no paper. */
  --bg: #F1F2F0;            /* canvas behind panels */
  --surface: #FFFFFF;       /* tiles, ticket, cards, sheets */
  --surface-2: #F7F8F6;     /* rails, keypad keys, quiet wells */
  --line: #E2E4E0;          /* 1px dividers and borders */
  --line-strong: #C9CDC7;   /* input borders, hover */

  /* ink */
  --ink: #121513;           /* 18.4:1 */
  --ink-2: #454B46;         /* 8.9:1, secondary text */
  --ink-3: #686F69;         /* 5.2:1 (4.6:1 on --bg), meta, labels, hints */
  --on-ink: #FFFFFF;        /* text on ink fills */

  /* brand + action: pine. The one primary per screen, selection. Never errors. */
  --brand: #0B6E4F;         /* 6.3:1, white on it 6.3:1 */
  --brand-ink: #FFFFFF;
  --brand-press: #08583F;
  --brand-tint: #E4F1EA;    /* pine on it 5.4:1 */

  /* state. Always icon + word, never colour alone. */
  --paid: #0B6E4F;          /* done, sent, adds up, stable reading */
  --open: #9A4A00;          /* amber: needs you, waiting; 6.3:1 */
  --open-tint: #FCEFD9;
  --error: #B4152B;         /* crimson: error, blocked, allergy; 6.8:1 */
  --error-tint: #FBE8EA;    /* crimson on it 5.8:1 */
  --info: #2F5E8C;          /* focus ring, in progress (sending, reading the scale); 6.8:1 */
  --dash: #7D847E;          /* dashed = not final / not sent / offline / not added yet, and nothing else. 3.4:1 on --bg */

  /* type: one family, variable. Amounts and weights always tabular. */
  --font-ui: "Instrument Sans", system-ui, sans-serif;
  --tracking-tight: -.02em; /* 28px and up */
  --tracking-caps: .06em;   /* uppercase labels */

  /* space: 4 base */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-pill: 999px;
  --sheet: 0 16px 40px rgba(18,21,19,.16), 0 2px 6px rgba(18,21,19,.06);
  --focus: 3px solid var(--info);
  --text-min: 14px;
}

/* POS: the instrument. Dense, fixed, fast. Smaller radii, larger targets, no motion beyond feedback. */
[data-ui="pos"] {
  --fs-1: 14px;  /* meta, labels: also the minimum */
  --fs-2: 16px;  /* tile names, ticket lines */
  --fs-3: 18px;  /* buttons, section heads */
  --fs-key: 22px;/* keypad digits */
  --fs-4: 28px;  /* titles, scale reading on the line */
  --fs-5: 40px;  /* ticket total, cash display */
  --fs-6: 56px;  /* amount due, live scale weight */
  --radius-s: 6px; --radius-m: 10px; --radius-l: 14px;
  --touch-min: 48px; --key-min: 64px; --pay-height: 64px;
  --lift: 0 1px 0 rgba(18,21,19,.04);
  --motion: 0ms;          /* state changes are instant; only feedback flashes animate */
  --flash: 180ms;         /* scan / add flash */
}

/* Back office: the guide. Airy, readable, explains itself. Larger radii and display type, gentle motion. */
[data-ui="bo"] {
  --fs-1: 14px;  /* meta, table cells */
  --fs-2: 16px;  /* body */
  --fs-3: 18px;  /* card titles, lead sentences */
  --fs-4: 24px;  /* section titles, KPI values */
  --fs-5: 32px;  /* page titles */
  --fs-6: 44px;  /* the one number a page is about */
  --lh-body: 1.55;
  --measure: 64ch;        /* prose width */
  --page-max: 1120px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 18px;
  --touch-min: 40px;
  --lift: none;
  --motion: 180ms cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --bg: #0E100F; --surface: #171A18; --surface-2: #1E2220; --line: #2A2F2C; --line-strong: #3A403C;
  --ink: #F2F4F2; --ink-2: #BCC3BE; --ink-3: #8E9690; --on-ink: #121513;
  --brand: #2FA57C; --brand-ink: #06140E; --brand-press: #268A67; --brand-tint: #12291F;
  --paid: #2FA57C; --open: #F2A03D; --open-tint: #33230D; --error: #FF5D6E; --error-tint: #3A1419;
  --info: #86AEDB; --dash: #6E7670;
  --lift: none; --sheet: 0 16px 40px rgba(0,0,0,.5);
}