/* Obscure Technologies: tokens. Colours are measured in design/obscure-tech.md section 4.1. */
:root {
  --paper: #EEF0F2;
  --paper-2: #E3E7EA;
  --paper-3: #D3D9DF;
  --white: #FFFFFF;
  --ink: #0D1620;
  --ink-2: #46535F;
  --ink-3: #5B6874;
  --night: #0A121B;
  --night-2: #121D29;
  --violet: #5A3EE8;
  --violet-deep: #4A2FD0;
  --teal: #0A7F86;
  --teal-deep: #066A70;
  --signal: #FF5A1F;
  --signal-ink: #B83A0C;

  /* semantic: a dark band re-points these */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--paper-3);

  --sa-accent: var(--violet);
  --sa-accent-ink: #fff;

  --f-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w-light: 270;   /* Sora is a variable face. 270 is for display type from 30px up ... */
  --w-lead: 330;    /* ... and 330 for leads and quotes, where thin strokes at 19 to 30px would cost legibility */
  --f-mono: 'Overpass Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-travel: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --d1: 150ms;
  --d2: 300ms;
  --d3: 600ms;
  --d4: 1200ms;

  --gutter: clamp(20px, 4vw, 64px);
  --wrap: 1360px;
  --head-h: 84px;
  --radius: 4px;
}

@view-transition { navigation: auto; }