/*
 * The whole palette and type scale, in one place.
 *
 * Monochrome on purpose. The business card is black and white, the glyph field
 * is white on black, and colour would be the only thing on the page that came
 * from nowhere. Emphasis is carried by weight, scale and motion instead.
 */

:root {
  /* Surfaces, darkest first. */
  --ink: #050505;
  --ink-raised: #0c0c0c;
  --ink-panel: #121212;

  /* Type, brightest first. */
  --text: #f5f4ef;
  --text-soft: #b6b5ae;
  --text-muted: #888781;
  /* Carries real content - footer headings, the copyright line - so it has to
   * clear 4.5:1 against the ink rather than sit at the 2.3:1 it used to. */
  --text-faint: #787771;

  /* Hairlines. The page is built almost entirely out of these. */
  --line: rgba(245, 244, 239, 0.10);
  --line-strong: rgba(245, 244, 239, 0.22);
  --line-faint: rgba(245, 244, 239, 0.05);

  --accent: #f5f4ef;
  --accent-ink: #050505;

  /* Fluid type. Every size is a clamp so nothing needs a breakpoint. */
  --step--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.87rem);
  --step-0: clamp(0.95rem, 0.91rem + 0.22vw, 1.07rem);
  --step-1: clamp(1.12rem, 1.04rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.85vw, 1.9rem);
  --step-3: clamp(1.7rem, 1.38rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.75vw, 3.6rem);
  --step-5: clamp(2.7rem, 1.75rem + 4.75vw, 5.2rem);
  --step-6: clamp(2.5rem, 1.2rem + min(6.6vw, 9.4vh), 6.4rem);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;

  /* Rhythm. Sections are sized from these, never from raw numbers. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(4rem, 8vw, 7rem);
  --space-3xl: clamp(4.5rem, 8.5vw, 8rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
  --container: 82rem;
  --container-narrow: 58rem;

  /* One easing for everything that moves, so the page feels like one object. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 220ms;
  --duration: 500ms;
  --duration-slow: 900ms;

  --header-height: 4.75rem;
  --z-field-back: 0;
  --z-content: 2;
  --z-field-front: 6;
  --z-header: 20;
  --z-overlay: 60;

  color-scheme: dark;
}

/*
 * The page is authored dark. A light-preferring visitor still gets the dark
 * design rather than a washed-out half-translation of it, so the tokens are not
 * redefined here - only the form controls are told what they are sitting on.
 */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}