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

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

@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 constellation exists only on the dark canvas (S5 amended
   per-site, see package-info.md) */
html {
  color-scheme: dark;
}

:root {
  --color-surface: #0a0907;
  --color-panel: rgb(18 16 13 / 62%);
  --color-on-surface-bright: #f6f0e6;
  --color-on-surface-strong: #efe7da;
  --color-on-surface: #a49b8c;
  /* #8d8579 is the darkest warm grey that clears 4.5:1 on the ink canvas; the design's
     #7e7668 / #6f6759 / #6d6558 measure 3.2–4.3:1 and are lifted here (WCAG AA) */
  --color-on-surface-muted: #8d8579;
  --color-placeholder: #8d8579;

  --color-accent: #d8a657;
  --color-accent-strong: #e7c98d;
  --color-accent-bright: #f6e0b0;
  --color-accent-pale: #f0c987;
  --color-on-accent: #0a0907;
  --color-outline: #d8a657;

  --color-hairline-faint: rgb(239 231 218 / 8%);
  --color-hairline-soft: rgb(239 231 218 / 10%);
  --color-hairline-mid: rgb(239 231 218 / 13%);
  --color-hairline-strong: rgb(239 231 218 / 16%);
  --color-hairline-input: rgb(239 231 218 / 20%);

  --color-success-border: rgb(216 166 87 / 34%);
  --color-success-surface: rgb(216 166 87 / 6%);

  --color-vignette-transparent: rgb(10 9 7 / 0%);
  --color-vignette-mid: rgb(10 9 7 / 40%);
  --color-vignette-edge: rgb(10 9 7 / 86%);

  --font-family-display: 'Newsreader', Georgia, serif;
  --font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-display: 200;
  --font-weight-title: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --font-size-display: clamp(40px, 6.6vw, 92px);
  --font-size-lede: clamp(15px, 1.25vw, 17.5px);
  --font-size-card-title: clamp(21px, 2vw, 25px);
  --font-size-wordmark: clamp(15px, 1.5vw, 19px);

  --tracking-wordmark: .36em;
  --tracking-eyebrow: .32em;
  --tracking-button: .16em;
  --tracking-footer: .14em;
  --tracking-display: -.022em;

  --space-page-block: clamp(20px, 4vw, 56px);
  --space-page-inline: clamp(20px, 5vw, 56px);
  --space-header-block: clamp(20px, 3vw, 34px);
  --space-header-inline: clamp(20px, 4vw, 56px);

  --rounded-panel: 4px;
  --rounded-button: 3px;

  --duration-entrance: .9s;
  --ease-entrance: cubic-bezier(.2, .7, .2, 1);
  --grain-opacity: .05;
}