/* Tokens: the whole system in one place. See DESIGN.md for the contrast figures. */

@font-face {
  font-family: "Saira Semi Condensed";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

:root {
  /* Darkness, far to near. Planes get lighter as they come toward the viewer. */
  --void: #02060a;
  --deep: #030a11;
  --glow: #06131e;
  --far: #050e16;
  --plane: #091722;
  --near: #0e2230;
  --lift: #143243;
  --plane-a: rgba(9, 23, 34, 0.94);
  --near-a: rgba(14, 34, 48, 0.96);

  /* Cool light: information. */
  --ink: #e8f8fc;
  --ink-2: #a9cbd6;
  --ink-3: #7c9fab;
  --ink-4: #587885;
  --cyan: #62ddf2;
  --cyan-2: #2e93aa;
  --cyan-fill: rgba(98, 221, 242, 0.1);
  --cyan-fill-2: rgba(98, 221, 242, 0.18);

  /* Hairlines are the same cyan at three strengths. */
  --line: rgba(110, 215, 235, 0.2);
  --line-2: rgba(110, 215, 235, 0.38);
  --line-3: rgba(170, 238, 250, 0.78);

  /* Warm light: whatever the owner should attend to. */
  --gold: #f4b94c;
  --gold-2: #a67a2b;
  --gold-fill: rgba(244, 185, 76, 0.1);
  --gold-line: rgba(244, 185, 76, 0.5);

  /* Destruction only. */
  --red: #ff5c50;
  --red-fill: rgba(255, 92, 80, 0.12);
  --red-line: rgba(255, 92, 80, 0.55);

  /* Type */
  --f-display: "Saira Semi Condensed", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-read: "IBM Plex Sans", -apple-system, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --t-micro: 11px;
  --t-mini: 12px;
  --t-small: 13px;
  --t-ui: 15px;
  --t-read: 17px;
  --t-head: 22px;
  --t-num: 34px;
  --t-hero: 56px;

  /* Space: a 4 px step, seven sizes. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Strokes and the one corner treatment: a 45 degree cut at top right. */
  --hair: 1px;
  --bold: 2px;
  --cut: 16px;
  --cut-s: 8px;

  /* Height: how far a lifted plane, and a marked row, float above where they rest. */
  --float: 8px;
  --float-row: 4px;

  /* The reader's margin column, where the piece numbers sit. */
  --margin-col: 56px;

  /* Motion */
  --fast: 120ms;
  --move: 220ms;
  --arrive: 300ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);

  --strip-h: 56px;
  --dock-h: 0px;
  --gutter: 24px;

  /* The two rails every wide layout is built from. Their edges fall in the same place on every tab. */
  --rail: 316px;
  --rail-wide: 404px;
}

@media (max-width: 760px) {
  :root {
    --strip-h: 48px;
    --dock-h: calc(60px + env(safe-area-inset-bottom, 0px));
    --gutter: 16px;
    --t-hero: 48px;
    --margin-col: 40px;
  }
}