/* whizz: a tin toy box. Flat printed tin and box card, ink outlines a few pixels off the colour (litho
   misregistration), one accent (brass) that means winding = fees, tomato that means live, nothing else.
   Budget on a page: cream 70%, ink 18%, print teal 7%, brass 4%, tomato 1%. See D:\whizz\DESIGN.md. */
:root {
  color-scheme: light;

  /* box card, lightest panel last */
  --bg: #F3EBDB;
  --bg-2: #EADFC8;
  --surface: #FBF7EE;
  --surface-2: #F7F0E2;

  /* printed rules in the ink */
  --line: rgba(28, 26, 23, 0.10);
  --line-2: rgba(28, 26, 23, 0.22);
  --line-3: rgba(28, 26, 23, 0.42);
  --plate: 2px solid #1C1A17; /* the key plate: outlines on boxes, cards, buttons */

  /* text: ink, ink-2, muted (4.7:1 on the box card) */
  --ink: #1C1A17;
  --ink-2: #4B463E;
  --muted: #6B6357;

  /* the box's print colour: hero box frame, closing band, demo strip. Never a button. */
  --print: #1E6E69;
  --print-deep: #15504C;
  --print-ink: #FBF7EE;

  /* ONE accent: brass = winding = fees. The dial, the gauge, the key, the launch button, the headline's second beat. */
  --accent: #E3A630;
  --on-accent: #1C1A17;
  --accent-ink: #8A5E0C;   /* brass meaning as text on cream */
  --accent-soft: #F4C35A;  /* brass on the teal print */

  /* tomato = live, only: the antenna light and the live dot */
  --live: #E0472E;

  /* states only */
  --good: #2F7A3B;
  --bad: #B3321F;
  --warn: #8A5E0C;

  --font-display: "Dela Gothic One", "Arial Black", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.01em;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --border: 1px solid var(--line-2);
  --shadow: none;
  --litho: 3px; /* how far the colour plate sits off the ink plate */

  /* quick out, settles exactly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 66px;
}