/* Design tokens.
 *
 * A tight type scale with negative tracking on the display sizes, over a
 * near-black canvas. The palette is dark by necessity rather than fashion: the
 * whole page sits on top of two WebGL point fields, and a dot field only reads
 * against a dark ground.
 */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* surface */
  --bg: #08090a;
  --bg-raised: #0d0f11;
  --card: #111315;
  --card-hover: #16181b;
  /* Three of these are text and one is not. --fg-dim is the quietest colour
     any word is allowed to be: 4.76:1 on --card-hover, the lightest surface on
     the site, so it clears AA everywhere it can land. --fg-faint sits far below
     AA on purpose and is only for things the eye is meant to lose — the
     coverage list under its spotlight, rows fading back around a hover. Text a
     reader needs never uses it. */
  --fg: #f4f5f6;
  --fg-muted: #9ba1a6;
  --fg-dim: #7e858b;
  --fg-faint: #3d4247;

  /* hairlines. Borders here are near-invisible and doing a lot of work. They
     are low-alpha white rather than a flat grey, so they stay correct over the
     WebGL fields as well as over solid panels. */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-faint: rgba(255, 255, 255, 0.05);

  /* accent — one blue, used sparingly. Bright enough to hold against the
     near-black ground without glowing. */
  --brand: #51a2ff;
  --brand-hover: #3590f5;
  --brand-active: #1f7ee8;
  --brand-dim: rgba(81, 162, 255, 0.14);
  --warn: #ff8a5b;
  --good: #4ade80;

  /* type */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --tracking-default: -0.011em;
  --tracking-tight: -0.025em;
  --tracking-mono: 0.08em;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.55;

  /* layout — 1240px column, which leaves ~100px margins at 1440 */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: 24px;
  --section-y: 128px;

  --radius: 2px;
  --radius-lg: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 1100px) {
  :root {
    --text-7xl: 3.25rem;
    --text-6xl: 2.75rem;
    --text-5xl: 2.25rem;
    --text-4xl: 2rem;
    --section-y: 88px;
    --gutter: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-7xl: 2.5rem;
    --text-6xl: 2.25rem;
    --text-5xl: 1.875rem;
    --text-4xl: 1.625rem;
    --section-y: 64px;
  }
}