/*
 * The master's tokens: colours, fonts and sizes, in stage pixels on the 1920×1080 stage. Every
 * layout, component and scene uses these variables; change the look here.
 */
/* The faces are tobos.ai's: Hanken Grotesk and Geist Mono (SIL Open Font License, the OFL-*.txt beside them). */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(../media/1f21c6eaa0000f3329cfcfac966b43d5bebf5aa610303e33294ac31bc6f4bb59) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(../media/a1376a563717f1efa2f5286ab23da2b61ae8dec827a77b97adfa01cad4ec4ee2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(../media/5f3d6ad60f29d6cb708414ec6887163d63bf197377ef5417d2483ff31ace6c3b) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(../media/745994b5cd950ec201b66526375f057d540847cccfc70f4f24f5f571d26d3923) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* Colour, tobos.ai's: white paper and one ink, which is also the accent; red is the one colour
     that shouts. */
  --stage-paper: #ffffff;
  --stage-ink: #121a2c;
  --stage-muted: #474f62;
  --stage-rule: #e5e6e8; /* tobos.ai's --line, flattened onto white */
  --stage-accent: #121a2c;
  /* The ink's tint: surfaces, chips and panels, never text. */
  --stage-soft: #edf0f6;
  --stage-dark: #121a2c;
  /* "Look here now": used for one thing at a time. */
  --stage-highlight: #ef4423;
  /* The dark tone turns the palette over: paper is the dark, and ink and accent white, so what is
     drawn in ink still reads; muted, rules and the tint are their own, muted as far from the dark
     as on paper. */
  --stage-dark-ink: #ffffff;
  --stage-dark-muted: #a5adbf;
  --stage-dark-rule: #2b3550;
  --stage-dark-soft: #1d2740;

  /* Type. Hanken Grotesk for words, Geist Mono capitals for labels, and Geist Mono for code. */
  --stage-font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --stage-font-label: 'Geist Mono', ui-monospace, monospace;
  --stage-font-mono: 'Geist Mono', ui-monospace, monospace;
  /* The type scale. 28px is the floor: nothing on stage is smaller. */
  --stage-size-label: 28px;
  --stage-size-code: 32px;
  --stage-size-body: 40px;
  --stage-size-lead: 52px;
  --stage-size-title: 64px;
  --stage-size-section: 96px;
  --stage-size-display: 144px;
  /* Labels' capitals, spaced out (.stage-label). */
  --stage-label-tracking: 0.08em;

  /* The grid: 112px side margins, 96px top and bottom, 12 columns with 32px gutters. */
  --stage-margin-x: 112px;
  --stage-margin-top: 96px;
  --stage-margin-bottom: 96px;
  --stage-gutter: 32px;
  --stage-space: 8px;

  /* Focus: what isn't the point right now. */
  --stage-opacity-dim: 0.25;
  --stage-opacity-muted: 0.55;
}

.tobos-stage {
  font-family: var(--stage-font-text);
  font-size: var(--stage-size-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.tobos-stage *,
.tobos-stage *::before,
.tobos-stage *::after {
  box-sizing: border-box;
}
/* The label face, Geist Mono capitals: chips, a quote's source, the wayfinder, the kickers, and a
   scene's own labels take the class rather than copying it. */
.stage-label {
  font-family: var(--stage-font-label);
  font-size: var(--stage-size-label);
  font-weight: 500;
  letter-spacing: var(--stage-label-tracking);
  text-transform: uppercase;
}