/* grabpins design tokens — library catalogue card & circulation pocket.
 *
 * Palette derivation: the card catalogue's saturated materials, not its paper.
 * Library binding buckram, the violet aniline ink of a date stamp, and the
 * brass of a drawer label holder. Deliberately NOT cream stock with a serif,
 * which is where this subject pulls every generator that meets it.
 *
 * Physical scene deciding dark-or-light: a phone held one-handed in a bright
 * kitchen, or in bed at night. So the furniture is dark and the card is light —
 * which is also literally true of an oak drawer holding a bone card.
 */
:root {
  /* -- ground: the cabinet -------------------------------------------- */
  --buckram-900: #0E1F1A;
  --buckram-800: #17302A;
  --buckram-700: #1F413A;
  --buckram-600: #2C564D;

  /* -- the card ------------------------------------------------------- */
  --stock-100: #F2F0E9;
  --stock-200: #E7E4DA;
  --stock-300: #D5D1C4;
  --stock-400: #B4AF9E;

  /* -- ink ------------------------------------------------------------ */
  --ink-900: #14201C;
  --ink-700: #38443F;
  --ink-500: #5E6A64;

  /* -- the date stamp ------------------------------------------------- */
  --violet-600: #5B3A8E;
  --violet-500: #6F4AA6;
  --violet-100: #E6DDF3;

  /* -- brass ---------------------------------------------------------- */
  --brass-500: #A8823C;
  --brass-400: #C39C51;
  --brass-100: #EFE2C4;

  /* -- states --------------------------------------------------------- */
  --warn-600: #8A5A1B;
  --stop-600: #8C2F2A;

  /* -- roles ---------------------------------------------------------- */
  --bg: var(--buckram-800);
  --bg-deep: var(--buckram-900);
  --surface: var(--stock-200);
  --surface-raised: var(--stock-100);
  --text: var(--ink-900);
  --text-quiet: var(--ink-500);
  --text-on-dark: var(--stock-200);
  --text-on-dark-quiet: #9FB3AC;
  --accent: var(--violet-600);
  --rule: var(--stock-400);
  --rule-dark: var(--buckram-600);

  /* -- type ------------------------------------------------------------
   * Operate mode is well served by workhorse stacks, and a system stack is the
   * only honest answer to eleven locales including Arabic and Devanagari.
   * The typed face is Courier New: it ships on virtually every Mac and Windows
   * machine, it IS a typewriter face, and a catalogue card was typed. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Thai", sans-serif;
  --font-typed: "Courier New", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.20vw, 2.70rem);

  /* -- measure & rhythm ------------------------------------------------ */
  --measure: 64ch;
  --gutter: clamp(1rem, 0.7rem + 1.6vw, 2rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* -- a true one-device-pixel hairline --------------------------------
   * Donated discipline: every rule, rod and pocket edge is drawn at one
   * device pixel and re-solves when the display or zoom changes, instead of
   * a 1px CSS border blurring into two device pixels on a retina screen. */
  --hairline: 1px;

  --focus: 2px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-resolution: 2dppx) {
  :root { --hairline: 0.5px; }
}
@media (min-resolution: 3dppx) {
  :root { --hairline: 0.34px; }
}