/* Dead channel: the 0zk.ai design tokens. This file is the source of truth for colour, type,
   space, layout and motion on the website and the desk. Change a value here first, then
   rebuild the reference (node design/build.mjs). Rules for using them: design/README.md. */

/* Fonts, self-hosted (font-src 'self'), SIL Open Font License; see fonts/.
   Doto: the Google Fonts latin subset (no Reserved Font Name). IBM Plex: IBM's own released split
   files from the @ibm/plex-* packages, unmodified, with IBM's unicode ranges. The Pi file (≈,
   arrows, math, box drawing) downloads only on a page that uses one of its characters. */
@font-face { font-family: "Doto"; font-style: normal; font-weight: 500 900; font-display: fallback; src: url("fonts/Doto-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexSansCondensed-Medium-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexSansCondensed-SemiBold-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02; src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+03C0,U+0E3F,U+2000-200D,U+2010-2012,U+2015,U+2028-2029,U+202F,U+2032-2033,U+203E,U+205F,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+2219-221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2400-2421,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+3000,U+FEFF,U+FFFD; src: url("fonts/IBMPlexMono-Medium-Pi.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Night: the network. The page is always night; there is no light mode. */
  --night: #1B2124;    /* page ground */
  --slate: #232A2E;    /* raised field: rail, composer, diagrams, drawer, carbon copies */
  --slate-2: #2B3337;  /* hover on slate; the dark cell of the dither pattern */
  --line: #3B4549;     /* rules and borders on night and slate (decorative) */
  --edge: #6A7173;     /* the boundary of a field you type into: 3.3:1 on night */
  --fg: #DCE1D8;       /* text, strokes and filled marks on night */
  --fg-2: #9AA3A3;     /* secondary text on night and slate */

  /* Paper: only what you can sign now. */
  --paper: #F4EFE2;
  --bar: #EDEEDF;      /* the green bar of continuous-form paper */
  --ink: #1F2A24;      /* text on paper; the sign button */
  --ink-hover: #0F1712;
  --ink-2: #55605A;    /* secondary text on paper */
  --perf: #C9C2AF;     /* perforations and dashed rules on paper; a spent sign button */

  /* Light: one sodium lamp. Marks the live thing and the caret. Never text, never a link. */
  --sodium: #F59A3B;

  /* Static: the dead-channel ramp. Art and dither cells only, never text. */
  --static-1: #3B4144;
  --static-2: #495053;
  --static-3: #585F62;
  --static-4: #6A7173;
  --static-5: #7E8486;
  --static-6: #959A9A;

  /* Type families: four, and no others. */
  --font-dot: "Doto", ui-monospace, monospace;                                        /* the wordmark and the boards */
  --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;     /* headings, labels */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;     /* the voice */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* machine facts */

  /* Type roles (size/line-height). Weights and tracking are in components.css. */
  --text-board: clamp(46px, 6.2vw, 92px);  /* Doto wordmark on the hero board */
  --text-dot-l: 56px;                      /* Doto wordmark in the desk's empty state */
  --text-dot-m: 26px;                      /* Doto: desk bar wordmark, departures headings */
  --text-h1: clamp(30px, 3.4vw, 50px);
  --text-h2: clamp(28px, 3.1vw, 44px);
  --text-h3: 24px;
  --text-quote: clamp(26px, 2.6vw, 38px);  /* the sentence you say */
  --text-title: 26px;                      /* printout title */
  --text-empty: 36px;                      /* empty-state heading */
  --text-statement: 20px;
  --text-transcript: 19px;
  --text-lede: 18px;
  --text-body: 17px;
  --text-small: 16px;
  --text-meta: 15px;                       /* labels, buttons, list facts */
  --text-caption: 14px;
  --text-amount: 22px;                     /* mono, on paper */
  --text-mono: 14px;                       /* mono facts on paper */
  --text-mono-s: 13px;                     /* trace, printout head, states */
  --text-diagram: 11px;                    /* mono in diagrams (SVG user units) */
  --leading: 1.6;
  --leading-tight: 1.08;

  /* Space: 4 px steps. Component geometry (holes, marks, connectors) is literal in components.css. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-26: 104px;
  --space-30: 120px;

  /* Layout. Breakpoints (CSS cannot read variables in media queries): 1100px stacks the desk,
     860px stacks the website's columns. */
  --page: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 60ch;
  --rail-min: 390px;
  --rail-max: 480px;
  --compose-h: 144px;   /* the pinned composer's height on a phone (scroll-padding); a consumer whose
                           composer changes height sets it on .work from a ResizeObserver */
  --section: clamp(64px, 11vh, 120px);
  --control: 40px;      /* minimum height of a control on night */
  --control-l: 52px;    /* the sign button, the composer */

  /* Motion: one tune-in per page, then stillness. dead-channel.js reads these two. */
  --tune-delay: 420ms;
  --tune-step: 115ms;
}