@font-face {
  font-family: "Lineal";
  src: url("./assets/fonts/LinealVF.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("./assets/fonts/AtkinsonHyperlegibleNext-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-display: "Lineal", "Arial Black", sans-serif;
  --font-body: "Atkinson", Arial, sans-serif;

  --color-paper: oklch(96.5% 0.012 82);
  --color-paper-raised: oklch(92% 0.014 82);
  --color-plane: oklch(87% 0.016 82);
  --color-ink: oklch(18.5% 0.013 72);
  --color-ink-soft: oklch(34% 0.012 72);
  --color-contact: oklch(72% 0.16 76);
  --color-accent: var(--color-contact);
  --color-accent-ink: var(--color-ink);
  --color-focus: oklch(46% 0.14 66);
  --color-focus-on-dark: var(--color-contact);
  --color-depth: oklch(24% 0.045 235);
  --color-depth-text: oklch(96.5% 0.012 82);
  --color-focus-rest: transparent;
  --color-error: oklch(45% 0.15 29);
  --color-success: oklch(42% 0.1 145);

  --rule-hairline: 1px;
  --rule-strong: 2px;
  --border-thin: var(--rule-hairline);
  --border-heavy: var(--rule-strong);
  --radius-cut: 0.2rem;
  --radius-control: 0.35rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-1: var(--space-2xs);
  --space-2: var(--space-xs);
  --space-3: var(--space-sm);
  --space-4: var(--space-md);
  --space-5: var(--space-lg);
  --space-6: var(--space-xl);
  --space-7: var(--space-2xl);
  --space-8: var(--space-3xl);
  --space-9: var(--space-4xl);
  --space-10: var(--space-5xl);

  --content-max: 78rem;
  --reading-max: 65ch;
  --rail-width: 4.5rem;
  --control-height: 2.75rem;
  --z-raised: 2;
  --z-sticky: 30;

  --step--1: clamp(0.78rem, 0.74rem + 0.13vw, 0.88rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.65rem);
  --step-2: clamp(1.65rem, 1.37rem + 1.15vw, 2.5rem);
  --step-3: clamp(2.15rem, 1.66rem + 2.1vw, 3.75rem);
  --step-4: clamp(3.1rem, 2.15rem + 4.4vw, 6.25rem);
  --step-5: clamp(4.2rem, 2.8rem + 7vw, 9rem);
  --text-label: var(--step--1);
  --text-body: var(--step-0);
  --text-lead: var(--step-1);
  --text-title: var(--step-2);
  --text-heading: var(--step-3);
  --text-display: var(--step-4);
  --text-hero: var(--step-5);

  --line-tight: 0.94;
  --line-heading: 1.02;
  --line-body: 1.58;
  --tracking-label: 0.09em;

  --ease-out: cubic-bezier(0.18, 0.8, 0.24, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-settle: 900ms;
}