/* Fictionary's look: a library's reading room (docs/fictionary.md, "Its
   look"). An oxblood leather desk with gold tooling, and on it the cards
   of a card catalog: cream stock with a red rule along the top and pale
   blue lines, every definition typed on the same typewriter, so no one's
   handwriting gives them away. This file is the tokens (the house's, the
   room kit's and Fictionary's own) and the faces; it's loaded before the
   room's structure (games/room/room.css), and the desk (desk.css) after
   it. The Django pages (games/templates/fictionary/page.html) wear just
   this.

   Faces, all OFL and bundled in fonts/: Libre Caslon Text (the display,
   the headwords: a dictionary's own face; bold, regular and italic for a
   part of speech), Courier Prime (the typed cards) and Figtree (everything
   else, for reading on a phone). */

@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/libre-caslon-text-700-latin.33af9ef1744b.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-caslon-text-400-latin.001d520e0d8b.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/libre-caslon-text-400-italic-latin.da67fedc7811.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-400-latin.ddb0efd5d81c.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-700-latin.4faaae3e616a.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-400-800-latin.392aed3eb142.woff2") format("woff2"); }

:root {
  /* the house's (docs/design-system.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the reading room: oxblood leather, gold tooling */
  --leather: #4a2327; --leather-lo: #261113;
  --gold: #d4af6a; --gold-lo: #8f6f35;

  /* the catalog cards: cream stock, a red rule, pale blue lines, typed in
     near-black; the stamp a librarian's red. Ink on the card reads at 14:1,
     its soft ink at 6:1, the stamp at 6:1. */
  --cat-paper: #faf4e6;
  --cat-paper-lo: #f1e7d2;
  --cat-ink: #2a221d;
  --cat-soft: #665446;
  --cat-rule: #c0443a;
  --cat-line: #c9d8e6;
  --cat-edge: #d9ccb2;
  --stamp: #b3261e;
  --type: "Courier Prime", "Courier New", Courier, monospace;
  --headword: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;

  /* the room kit's (docs/design-system.md, "The room kit"), on the leather */
  --room: #1c1012;
  --table: radial-gradient(ellipse at 50% 0%, #4a2327, #36181b 55%, #261113);
  --rail: 1.5px solid #8f6f35;
  --rail-radius: 18px;
  --panel: rgba(0, 0, 0, .22);
  --panel-edge: 1.5px solid rgba(246, 236, 216, .16);
  --panel-radius: 12px;
  --sheet: #2e1719;
  --chip: rgba(0, 0, 0, .25);
  --chip-edge: 1.5px solid rgba(246, 236, 216, .3);
  --chip-radius: 999px;
  --ink: #f6ecd8;
  --soft: #d2b99c;
  --turn: #ffd34d;
  --good: #a6dc8f;
  --bad: #ff9a85;
  --focus: #f6ecd8;
  --btn: #f6ecd8;
  --btn-ink: #2a1214;
  --btn-edge: 2px solid #f6ecd8;
  --btn2: transparent;
  --btn2-ink: #f6ecd8;
  --btn2-edge: 2px solid #f6ecd8;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #1c1012;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --display-weight: 700;

  color-scheme: dark;
}

body { background: var(--room); }