/* HOLOS Website — 1st Draft. Shared by the website and its design system. */
:root {
  --color-ground: #c9bea9;
  --color-ink: #322d27;
  --color-muted: #605547;
  --color-title: var(--color-muted);
  --color-blue: #244f99;
  --color-clay: #a2694d;
  --color-ochre: #a88a44;
  --color-line: rgba(84, 65, 43, 0.24);
  --color-line-strong: rgba(84, 65, 43, 0.52);
  --geometry-blue: #2459a4;
  --geometry-earth: #89553b;
  --geometry-dust: #785339;
  --font-family: "Josefin Sans", "Helvetica Neue", sans-serif;
  --type-wordmark: 1.075rem;
  --tracking-wordmark: .38em;
  --weight-wordmark: 500;
  --type-hero: clamp(4.8rem, 9.4vw, 10.5rem);
  --type-hero-mobile: clamp(4.3rem, 18vw, 8rem);
  --tracking-hero: -.065em;
  --leading-hero: .88;
  --type-body: clamp(1rem, 1.35vw, 1.3rem);
  --leading-body: 1.6;
  --weight-body: 400;
  --type-label: .8rem;
  --tracking-label: .2em;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 8rem;
  --focus-width: 2px;
  --focus-offset: 5px;
  /* Compatibility aliases preserve the existing stylesheet's cascade. */
  --black: var(--color-ground);
  --white: var(--color-ink);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --signal: var(--color-blue);
  --clay: var(--color-clay);
  --ochre: var(--color-ochre);
  --line: var(--color-line);
  --line-bright: var(--color-line-strong);
  --font: var(--font-family);
}