/* Design tokens: the single place colours, spacing, radii, type sizes and
   layout dimensions are defined. Every other stylesheet consumes these and
   must not restate a literal.

   The palette is B3a 莫蘭迪・灰陶 (docs/design/b3a/B3a-implementation-spec.md,
   approved 2026-10-21): warm grey clay, almost monochrome, layered by
   lightness rather than by lines. Orange appears in exactly two places: the
   primary button's fill (--accent) and the small "you are here / this chair
   is taken" dot (--signature). Never as text, a link, an outline, a
   selected state or a large area.

   Contrast (WCAG: text 4.5, dots / focus ring / hairline borders 3.0) was
   checked for every pairing the spec lists. Two tokens are not fit for
   text and must never be used as a text colour: --ok (4.43 on canvas; use
   --ok-ink) and --accent (4.34 on canvas). */

:root,
[data-theme="light"],
/* The waiting-room TV stays light whatever the desk prefers: the lighting
   out there is fixed (spec §13). Declared on body, so it wins over what
   html would hand down. */
body[data-view="queue-display"] {
  color-scheme: light;
  /* Surfaces */
  --canvas: #ede8e1;          /* the page */
  --group: #f6f2ec;           /* cards, lists, inputs */
  --fill: #e3dcd2;            /* secondary buttons, chips, teeth, current menu item */
  --fill-strong: #d7cec2;     /* secondary hover */
  --fill-press: #cbc1b4;      /* secondary active */
  --tile: #ddd2c5;            /* a taken chair, emphasised blocks */
  --hairline: #e2dbd1;        /* between list rows */
  --hairline-strong: #d3cabe; /* empty chair, table head, hour lines, input borders */
  /* Ink */
  --ink: #3b342e;
  --ink-2: #564d45;
  --ink-3: #605750;           /* table heads, hints, empty states */
  /* Action: orange is these and the dot, nothing else */
  --accent: #a65443;
  --accent-hover: #974a3b;
  --accent-press: #86412f;
  --on-accent: #faf4ec;
  --signature: #9a4a3a;       /* the dot */
  /* Signals, each a wash and an ink */
  --danger: #8e2a22;  --danger-wash: #f3e1dc;   /* allergy, debt, no-show, errors */
  --warn: #6b5313;    --warn-wash: #f1e8d3;     /* late, overtime, draft, to-do */
  --ok: #4f7a55;                                 /* dots only (live connection) */
  --ok-ink: #456b4b;  --ok-wash: #e3eadf;        /* arrived, in use */
  --selfpay: #46628a;                            /* 自費收費星（A17）專用，不用在別處 */
  /* Interaction */
  --focus-ring: #564d45;
  --nav-hover: color-mix(in srgb, var(--fill) 55%, transparent);
  --disabled-bg: #e3dcd2;  --disabled-ink: #605750;
  --spin-track: rgb(250 244 236 / 0.35);
  --scrim: rgb(59 52 46 / 0.35);
}

/* 深色只在螢幕上生效：在深色模式按 window.print()，紙是白的，深色主題的
   淺色字會印成白紙淡字。包在 not print 裡，列印時自動回到上面的淺色值
   （深字白底），不必在 print.css 再抄一份色票。 */
@media not print {
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #2a2622;  --group: #322d28;  --fill: #3c3630;  --fill-strong: #474039;  --fill-press: #524a42;
  --tile: #463e37;
  --hairline: #4a423a;
  --hairline-strong: #5a5047;
  --ink: #e8e0d5;  --ink-2: #cfc5b8;  --ink-3: #bcb1a4;
  --accent: #a65443;  --accent-hover: #974a3b;  --accent-press: #86412f;  --on-accent: #faf4ec;
  --signature: #d98a78;
  --danger: #f0a097;  --danger-wash: #4a2f2b;
  --warn: #ddbe74;    --warn-wash: #3e3524;
  --ok: #8fc49a;  --ok-ink: #8fc49a;  --ok-wash: #2f3a2f;
  --selfpay: #9db4d8;
  --focus-ring: #cfc5b8;
  --disabled-bg: #3c3630;  --disabled-ink: #bcb1a4;
  --scrim: rgb(0 0 0 / 0.45);
}
}

:root {
  /* --- Type ------------------------------------------------------------
     --font-ui for everything people read and type; --font-display (serif)
     for headings and for numerals that are the point of a line (times,
     ticket numbers, totals). The display faces are self-hosted
     (css/fonts/fonts.css). The Extension B faces at the end of both lists
     keep rare characters in names from turning into boxes. */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Noto Sans TC", "Microsoft JhengHei UI",
    "Microsoft JhengHei", "PingFang TC", "PMingLiU-ExtB", "MingLiU_HKSCS-ExtB", "SimSun-ExtB", "SimSun-ExtG", sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU",
    "PMingLiU-ExtB", "MingLiU_HKSCS-ExtB", "SimSun-ExtB", "SimSun-ExtG", serif;
  --numerals: "lnum" 1, "tnum" 1;

  --fs-caption: 14px;   /* key caps and phone tab labels only */
  --fs-footnote: 16px;  /* the floor for every other piece of text */
  --fs-body: 17px;
  --fs-title3: 20px;
  --fs-title2: 22px;    /* card headings (serif) */
  --fs-title1: 28px;    /* dates beside a title, phone page title */
  --fs-large: 34px;     /* page title, patient in a chair (serif) */
  --fs-numeral: 24px;   /* times and tickets in a list (serif numerals) */
  --fs-numeral-lg: 48px;/* minutes in a chair */
  --fw-regular: 400;  --fw-semibold: 600;
  --lh-ui: 1.3;  --lh-text: 1.47;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 56px; --sp-9: 72px;

  --h-control: 44px;     /* buttons and inputs */
  --h-control-sm: 40px;  /* buttons inside table rows, chips */
  --h-row: 56px;         /* list and table rows */
  --h-search: 52px;
  --sidebar-width: 220px;
  --content-max: 1280px;

  --r-pill: 999px;  --r-tag: 6px;  --r-tooth: 10px;  --r-input: 14px;  --r-group: 16px;  --r-tile: 20px;

  --indicator-dot: 6px;     /* current menu item, current phone tab */
  --indicator-dot-lg: 8px;  /* a taken chair */

  --dur-micro: 160ms;  --dur-press: 150ms;  --dur-sheet: 200ms;
  --ease-micro: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --press-scale: 0.98;

  /* 名字前的三顆星（A17，設計 v3）：SVG 字形大小與按鈕盒。清單與收費用預設，看診標頭寬版與叫號椅卡用 lg。 */
  --star-glyph: 22px;     --star-box-w: 24px;     --star-box-h: 28px;
  --star-glyph-md: 26px;  --star-box-w-md: 28px;  --star-box-h-md: 34px;  /* ≤899 時 20px 的看診標頭 */
  --star-glyph-lg: 30px;  --star-box-w-lg: 32px;  --star-box-h-lg: 40px;

  /* The waiting-room TV, read from across the room (queue board spec §6.2). */
  --text-display: 2rem;      /* lists and labels */
  --text-display-lg: 3rem;   /* who is in a chair; where to go */
  --text-display-xl: 5.5rem; /* the name being called */

  /* The one older name still in use: print.css (receipts, kept exactly as
     they were) spaces with it. */
  --space-6: var(--sp-4);
}