/* =========================================================================
   Kasey&Co.: design tokens (rewritten 2026-10-27, after launch)
   The single source of truth for colour, type and the press-in shadow.
   commercial.css (the site) and fixlist.css (16:9 sheets) consume this file
   and define no palette or type values of their own. _brand/BRAND.md says
   what each one is for.

   Only what the live design uses is here. The old system (Boldonse
   headings, IBM Plex Mono labels, the blue accent, olive, the demo tiers)
   was removed with it; git history has it.
   ========================================================================= */
:root{

  /* --- colour: ground ---------------------------------------------------- */
  --color-paper:#F2EDE3;          /* cream, the page ground                 */
  --color-paper-2:#ECE6D9;        /* recessed cream: panels, schematics     */
  --color-stone:#D9D4C8;          /* quiet surface; never under small text  */
  --color-mat:#E6E0D3;            /* the table a 16:9 sheet sits on         */
  --color-ink:#1C1A16;            /* charcoal: text, borders, the ink band  */

  /* --- colour: the accent ------------------------------------------------ */
  --color-teal:#0E5B6B;           /* 6.6:1 on cream. Highlights, never a surface,
                                     except the one closing band            */
  --color-teal-light:#5BB0BE;     /* teal on ink only: 6.95:1 on charcoal   */
  --color-accent:var(--color-teal);

  /* --- colour: ink at depth, on cream ------------------------------------ */
  --color-soft:rgba(28,26,22,.68);        /* supporting copy, labels        */
  --color-line:rgba(28,26,22,.15);        /* hairline                       */
  --color-line-strong:rgba(28,26,22,.18); /* hairline, one step up          */

  /* --- colour: cream at depth, on ink ------------------------------------ */
  --color-paper-soft:rgba(242,237,227,.74);  /* supporting copy on ink     */
  --color-paper-line:rgba(242,237,227,.18);  /* hairline on ink            */

  /* --- type ---------------------------------------------------------------
     Three faces, each with one job. Fraunces speaks: headings, statements
     and one italic word per page, in ink. Its soft, rounded cut is fixed
     in the font link (SOFT 100), so nothing sets it by hand. Boldonse,
     the face the KC is cut from, sets the wordmark and the labels, in
     capitals, and nothing else. Schibsted Grotesk does everything you
     read and press.                                                       */
  --font-serif:'Fraunces',Georgia,serif;
  --font-mark:'Boldonse','Arial Black',sans-serif;
  --font-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --weight-display:560;       /* page titles                               */
  --weight-serif:470;         /* every other heading and statement         */
  --weight-serif-italic:420;  /* the one italic word                       */

  /* --- the press-in shadow ------------------------------------------------
     Buttons only. A hard offset with no blur that shortens on hover, so the
     control seems to press into the page. Compose it as
     `box-shadow: var(--press-sm) var(--color-accent)`.                     */
  --press-sm:3px 3px 0;
  --press-2xs:1px 1px 0;

  /* --- motion ---------------------------------------------------------------- */
  --ease-press:.12s ease;
  --ease-hover:.18s ease;
}