/* Gather: every number the look stands on, once. Sources are in the plan note and Igoko Design.
   The owner picks the final colours and look at the end; change them here and nowhere else.
   No other stylesheet holds a colour value: they take these.
   This file is the default look. dir-a.css, dir-b.css and dir-c.css each redeclare every token below under
   :root[data-direction="a|b|c"], so putting data-direction on <html> switches the whole app; tests/test_design.py
   fails if a direction leaves one out. A token added here must be added to all three. */
:root {
  /* Grounds and inks, the Igoko family (Brand.md, Igoko Design) */
  --ground: #f1efe6;        /* studio chalk, "cooled + lifted" */
  --card: #fdfbf5;          /* the Igoko white, near-white paper */
  --ink: #2a2620;           /* the Igoko black */
  --ink-soft: #6b6255;      /* 5.2:1 on ground */
  --line: #e3dfd2;          /* hairlines */
  --field: #f7f4ea;         /* inputs */

  /* The product colour: a mark and an area, never text. Candidates from the identity artboards. */
  --mark: #e3c34a;          /* lead-tin yellow, "the blue's complement, gold". Ink on it 8.7:1 */
  --mark-deep: #c9a93a;     /* one step darker, for a pressed stamp edge */
  --mark-wash: #f6ecc4;     /* the mark at about 25% over the card */
  --on-mark: var(--ink);    /* text and icons drawn on the mark: ink on lead-tin yellow, 8.7:1 */
  --button-bg: var(--ink);  /* the main button */
  --button-ink: var(--card);
  --button-line: var(--ink);
  --focus: var(--ink);      /* the keyboard ring */

  /* The owner's pages: failure, success and the washes behind them; white and black for the few places that need them */
  --bad: #a4210f;           /* a fault, a revoked link, a danger button */
  --bad-wash: #f4d9d3;      /* behind a revoked or draft badge */
  --problem-wash: #f9e7e2;  /* behind a problem note and a sum that does not add up */
  --good: #1f5c2e;          /* a sum that adds up */
  --wash: #f1ede0;          /* a quiet band on the owner's pages */
  --white: #fff;            /* text on a danger button; the ground of a QR code */
  --black: #000;            /* only to darken a colour in colour-mix */
  --record: #b3261e;        /* the recording red, 6.1:1 on the card */

  /* Night values, held for later, derived by the Igoko rule (not switched on in Block 1) */
  --night-ground: #211e19;
  --night-card: #2a2721;
  --night-ink: #f0eae0;

  /* Type: base 17, major step phi 1.618, half step root-phi 1.272. Nothing under 13.5px. */
  --font-voice: "Newsreader", "New York", ui-serif, Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier Prime", ui-monospace, "Courier New", monospace;
  --size-caption: 13.5px;
  --size-body: 17px;
  --size-lead: 21.5px;
  --size-title: 27.5px;
  --size-display: 44.5px;
  --leading-body: 1.618;
  --leading-tight: 1.2;
  --weight-title: 500;
  --weight-lead: 400;
  --weight-button: 600;
  --track-title: -0.01em;
  --label-case: uppercase;
  --label-track: 0.06em;
  --size-numeral: 44.5px;   /* the big numbers: the keepsake codename and the card numbers */

  /* Space: 8 by phi, whole pixels, the Fibonacci run */
  --s1: 5px;
  --s2: 8px;
  --s3: 13px;
  --s4: 21px;
  --s5: 34px;
  --s6: 55px;
  --s7: 89px;

  /* Shape and motion: one corner for cards, one for controls, one curve, two durations */
  --corner-card: 5px;
  --corner-control: 8px;
  --corner-button: 8px;
  --corner-tag: 2px;        /* stamps and badges */
  --stroke: 1px;            /* the line round cards, fields and buttons */
  --tilt: -4deg;            /* how far a stamp leans */
  --lift: none;             /* the shadow under a button, at rest, hovered and pressed */
  --lift-hover: none;
  --lift-press: none;
  --measure: 560px;         /* the width of the column */
  --curve: cubic-bezier(0.45, 0, 0.55, 1);
  --fast: 180ms;
  --slow: 320ms;

  /* The smallest thing you tap */
  --tap: 44px;
}