/* Live Assistant, look "Boutique" (light, default) and "Boutique nuit" (dark), spec 2026-10-20 §2.
   The one source of the design tokens: colours, fonts, radii. Réglages sets data-theme on <html>: "boutique" or
   "nuit"; "system" removes it and prefers-color-scheme decides. test/tablet/contrast.test.ts reads the colour blocks:
   every text pair reaches 4.5:1 in both themes. Breakpoints are in layout.css, components in styles.css. */

/* Fonts, vendored (tablet/vendor/fonts/, SIL OFL 1.1, scripts/vendor-fonts.mjs): never fetched from Google.
   Familjen Grotesk (variable, 400-700) for display and UI; IBM Plex Mono for times, codes and references. */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/tablet/vendor/fonts/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/tablet/vendor/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/tablet/vendor/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/tablet/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The label canvas font (label-layout.js) and the print tray tickets, self-hosted in tablet/fonts/ (SIL OFL 1.1). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/tablet/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/tablet/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colours. Roles: bg = ground, surface/card = panel, deep = panel-2, rail = bars, chip = chips and hover,
   line / line-2 = hairlines and pill borders, line-strong = control boundaries (3:1), chalk = the accent (plum)
   and the primary fill, on-chalk = its ink; live, warn (check) and ok with their backgrounds. */
:root {
  color-scheme: light;
  --bg: #f8f4ef;
  --surface: #ffffff;
  --card: #ffffff;
  --deep: #f4eee8;
  --rail: #fffdfb;
  --chip: #f1e9e2;
  --line: #eae1d9;
  --line-2: #cdbfb3;
  --line-strong: #8e7f86;
  --text: #241a20;
  --muted: #6f6268;
  /* A line set aside (rejected, cancelled, seen): dimmer than muted, still 4.5:1; never opacity. */
  --text-dim: #74676d;
  /* Print tray tickets: paper and ink (dimmed in nuit so the tray does not glare). */
  --ticket: #fbfaf6;
  --ticket-ink: #111111;
  --ticket-muted: #4a4a4a;
  --chalk: #6b2d5c;
  --on-chalk: #ffffff;
  --live: #b8273f;
  --live-bg: #fbe7eb;
  --live-fg: #b8273f;
  --live-line: #ebb9c3;
  --warn: #97500a;
  --warn-bg: #fff7ec;
  --warn-line: #f0d9b6;
  --on-warn: #ffffff;
  --ok: #2b6e47;
  --ok-bg: #e3f1e8;
  --ok-fg: #2b6e47;
  --focus: #6b2d5c;
  --scrim: rgba(36, 26, 32, 0.4);
  --shadow-raised: 0 16px 40px -12px rgba(60, 30, 40, 0.22);
  --shadow-drawer: 16px 0 32px -16px rgba(60, 30, 40, 0.25);
  /* Customer avatars (avatar.js): her initials (on-avatar) on one of six tones picked from her customer key. */
  --avatar-1: #7a3b69;
  --avatar-2: #1f6b6b;
  --avatar-3: #9a4a1f;
  --avatar-4: #55622a;
  --avatar-5: #3a5a8c;
  --avatar-6: #9b3550;
  --on-avatar: #ffffff;
}

:root[data-theme="nuit"] {
  color-scheme: dark;
  --bg: #1b1518;
  --surface: #241c21;
  --card: #2a2127;
  --deep: #150f13;
  --rail: #201a1e;
  --chip: #33292f;
  --line: #3b3036;
  --line-2: #54464d;
  --line-strong: #8a7a82;
  --text: #f3ece6;
  --muted: #b9abb1;
  --text-dim: #a0939a;
  --ticket: #cdc5bb;
  --ticket-ink: #111111;
  --ticket-muted: #3b3b3b;
  --chalk: #e7bcd9;
  --on-chalk: #241a20;
  --live: #ff7a8e;
  --live-bg: #43202a;
  --live-fg: #ffb8c3;
  --live-line: #6e2c3b;
  --warn: #f2c27a;
  --warn-bg: #3a2a14;
  --warn-line: #80602c;
  --on-warn: #1b1518;
  --ok: #7fd1a0;
  --ok-bg: #1f3a2b;
  --ok-fg: #b8e8ca;
  --focus: #e7bcd9;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-drawer: 16px 0 32px -16px rgba(0, 0, 0, 0.7);
  --avatar-1: #e3b5d6;
  --avatar-2: #9fd4cf;
  --avatar-3: #f0b997;
  --avatar-4: #c9d39a;
  --avatar-5: #a9c1ea;
  --avatar-6: #f2a9b9;
  --on-avatar: #241a20;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #1b1518;
    --surface: #241c21;
    --card: #2a2127;
    --deep: #150f13;
    --rail: #201a1e;
    --chip: #33292f;
    --line: #3b3036;
    --line-2: #54464d;
    --line-strong: #8a7a82;
    --text: #f3ece6;
    --muted: #b9abb1;
    --text-dim: #a0939a;
    --ticket: #cdc5bb;
    --ticket-ink: #111111;
    --ticket-muted: #3b3b3b;
    --chalk: #e7bcd9;
    --on-chalk: #241a20;
    --live: #ff7a8e;
    --live-bg: #43202a;
    --live-fg: #ffb8c3;
    --live-line: #6e2c3b;
    --warn: #f2c27a;
    --warn-bg: #3a2a14;
    --warn-line: #80602c;
    --on-warn: #1b1518;
    --ok: #7fd1a0;
    --ok-bg: #1f3a2b;
    --ok-fg: #b8e8ca;
    --focus: #e7bcd9;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-raised: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    --shadow-drawer: 16px 0 32px -16px rgba(0, 0, 0, 0.7);
    --avatar-1: #e3b5d6;
    --avatar-2: #9fd4cf;
    --avatar-3: #f0b997;
    --avatar-4: #c9d39a;
    --avatar-5: #a9c1ea;
    --avatar-6: #f2a9b9;
    --on-avatar: #241a20;
  }
}

/* Fonts and radii (same in both themes). */
:root {
  --accent: var(--chalk);
  --on-accent: var(--on-chalk);
  --font-ui: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Article numbers, titles, big counters: the same family, heavier (its figures are tabular, tnum). */
  --font-display: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Times, codes, references. */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-num: var(--font-display);
  --r-card: 20px;
  --r-small: 12px;
  --r-control: 12px;
  --r-pill: 999px;
}