/*
 * Reckon design tokens. Single source for the site (web/) and the app (backend/static/design/).
 * Idea: information made beautiful. One measured line runs through the page.
 * Palette (light / dark):
 *   ground  #F1F2EE / #131816   page ground: cool stone, not cream
 *   paper   #FAFAF7 / #1A201D   plan and form surfaces
 *   ink     #1B2320 / #E7EAE5   text, plan lines, figures
 *   ink-2   #545E59 / #A2ABA6   secondary text
 *   rule    #D2D6D0 / #2E3632   hairlines, streets
 *   signal  #E2602F / #F07A45   the orange: actions, the listing, the most-likely mark
 * Type: Bricolage Grotesque only. Figures use tabular numerals and the width axis.
 */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  src: url('./fonts/bricolage-sub.woff2') format('woff2');
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
:root {
  color-scheme: light dark;
  --ground: light-dark(oklch(0.958 0.006 125), oklch(0.19 0.008 160));
  --paper: light-dark(oklch(0.985 0.004 110), oklch(0.225 0.009 160));
  --ink: light-dark(oklch(0.24 0.014 165), oklch(0.93 0.008 130));
  --ink-2: light-dark(oklch(0.46 0.014 165), oklch(0.74 0.01 150));
  --rule: light-dark(oklch(0.86 0.01 130), oklch(0.32 0.012 160));
  --rule-soft: light-dark(oklch(0.9 0.008 130), oklch(0.27 0.01 160));
  --signal: light-dark(oklch(0.635 0.18 40), oklch(0.71 0.165 45));
  --signal-text: light-dark(oklch(0.52 0.16 38), oklch(0.78 0.13 50));
  --on-signal: light-dark(oklch(0.2 0.02 40), oklch(0.18 0.02 40));
  --signal-wash: light-dark(oklch(0.66 0.18 40 / 0.1), oklch(0.71 0.165 45 / 0.09));
  --dropped: light-dark(oklch(0.5 0.012 160), oklch(0.68 0.01 160));

  --font: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  /* Type scale: ratio 1.25 from 17px body; display steps are fluid. */
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.66rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3.3rem);
  --t-display: clamp(2.6rem, 1.6rem + 5vw, 6rem);
  --t-figure: clamp(3rem, 2rem + 5.5vw, 7.5rem);

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --measure: 34rem;
  --page: 78rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }