/* The shared visual vocabulary — the browser's half of a contract with the phone.
 *
 * ⚠ **The source of truth is `app/lib/theme/tokens.dart` (`ReColors`).** Every
 * colour below is a value from there, under the same name, light and dark. The
 * redesign (`docs/APP_REDESIGN_PLAN.md`, 1.1.0) replaced the old region colours
 * (`--region-*`) with STATE colours: one meaning per colour, the same on the
 * map's shelf bar, a spine's trust mark and a badge. If a colour changes on the
 * phone, change it here in the same commit — a bookseller who learns that light
 * green means "read by re.order, nobody checked it" on the phone must not have
 * to learn something else on a laptop.
 *
 * The designer's prototype (`RE.ORDER Prototype v3.html`) set the roles; the
 * phone set the values, and where the two differ the phone wins:
 *   - body type is Archivo (the prototype used IBM Plex Sans);
 *   - "cuts to confirm" is the yellow of a selection, striped with a dark
 *     yellow (the operator, 2026-10-09), not the prototype's amber.
 */

/* The two faces, self-hosted — no CDN and no third-party request. The phone's
   TTFs are instanced from these same files (app/assets/fonts/README.md). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Ground and ink. */
  --paper: #f2eee6;
  --paper-2: #e8e2d6;
  --card: #fbf9f4;
  --ink: #1e1a16;
  --ink-2: #5a5248;
  --line: #d9d1c1;

  /* The one accent: primary buttons, links, focus, the active nav item. */
  --accent: #2e5b4e;
  --accent-ink: #f4f1ea;

  /* ── STATE colours — the part of this file that is a contract. ── */
  /* Checked by a person. */
  --checked: #2e5b4e;
  /* Identified by its barcode — the darkest green. */
  --barcode: #1e3f35;
  /* Read by re.order, nobody has checked it. Calm on purpose. */
  --read: #8fd3b0;
  /* A spine nobody could read — the one thing on a shelf that needs a person. */
  --unread: #e09a4c;
  /* Cuts waiting to be confirmed: this yellow, striped with --cuts-dark. */
  --cuts: #ffd86b;
  --cuts-dark: #7a5e00;
  /* What re.order decided on its own: a rescan's changes. */
  --info: #4c6a8a;
  --bad: #a33a2e;
  /* Lent out. */
  --lent: #4c6a8a;
  /* The yellow of a selected cell, line or spine. */
  --highlight: #ffd86b;

  /* The default bookcase: its frame, and the back of a shelf. A bookcase
     carries its own two colours in its document; these are the fallback. */
  --wood: #5b4636;
  --wood-2: #3a2f28;
  /* A shelf being read: the grey the bar fills over. */
  --busy: #777777;

  /* Type. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Positions, counts and ISBNs line up in columns, so they are tabular. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 50px rgba(42, 36, 32, 0.22);
  --shadow-sm: 0 1px 2px rgba(30, 26, 22, 0.06), 0 4px 12px rgba(30, 26, 22, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1a1713;
    --paper-2: #26221e;
    --card: #232019;
    --ink: #f2ece1;
    --ink-2: #b9b0a1;
    --line: #38322a;
    --accent: #6fb09a;
    --accent-ink: #13201b;
    --checked: #3e8a72;
    --barcode: #2e6b58;
    --info: #8fb0d0;
    --bad: #e07263;
    --lent: #8fb0d0;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1a1713;
  --paper-2: #26221e;
  --card: #232019;
  --ink: #f2ece1;
  --ink-2: #b9b0a1;
  --line: #38322a;
  --accent: #6fb09a;
  --accent-ink: #13201b;
  --checked: #3e8a72;
  --barcode: #2e6b58;
  --info: #8fb0d0;
  --bad: #e07263;
  --lent: #8fb0d0;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}