/* generated from DESIGN.md (identity: Cycle — sibonjic.com) — edit DESIGN.md first,
   then sync tokens.json and this file */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/archivo-v1.woff2') format('woff2');
}

/* single-scheme identity: the fog exists only on the dark canvas (S5 amended per-site,
   see package-info.md) */
html {
  color-scheme: dark;
}

:root {
  --color-surface: #070b14;
  --color-surface-wash: #101a30;
  --color-on-surface-strong: #f2f6ff;
  --color-on-surface: #eef2f8;
  --color-on-surface-muted: #8d97a8;
  --color-accent: #7fa6ff;
  --color-accent-deep: #5f86e8;
  --color-accent-hover: #9dbaff;
  --color-outline: #9dbaff;

  --color-halo: rgb(126 158 232 / 22%);
  --color-halo-transparent: rgb(126 158 232 / 0%);
  --color-shaft: rgb(126 158 232 / 10%);
  --color-shaft-transparent: rgb(126 158 232 / 0%);
  --color-vignette-transparent: rgb(7 11 20 / 0%);
  --color-vignette-mid: rgb(7 11 20 / 42%);
  --color-vignette-edge: rgb(7 11 20 / 86%);

  --font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-display: 300;
  --font-weight-regular: 400;
  --font-size-display: clamp(28px, 6.4vw, 86px);

  --tracking-display: .36em;
  --tracking-display-mid: .54em;
  --tracking-display-wide: .62em;

  --space-page-block: clamp(24px, 5vw, 64px);
  --space-page-inline: clamp(20px, 5vw, 56px);
  --size-halo-width: min(760px, 92vw);
  --size-halo-height: min(300px, 42vw);

  --duration-loop: 13s;
  --duration-shaft: 26s;
  --ease-loop: cubic-bezier(.4, 0, .3, 1);
  --grain-opacity: .045;
}