:root {
  --article-color-paper: oklch(12% 0.025 295);
  --article-color-paper-raised: oklch(16% 0.03 295);
  --article-color-paper-soft: oklch(20% 0.035 295);
  --article-color-ink: oklch(95% 0.018 300);
  --article-color-muted: oklch(72% 0.035 300);
  --article-color-rule: oklch(31% 0.035 295);
  --article-color-rule-strong: oklch(47% 0.07 220);
  --article-color-accent: oklch(82% 0.13 205);
  --article-color-accent-ink: oklch(13% 0.03 295);
  --article-color-focus: oklch(53% 0.2 340);

  --article-font-display: "Archivo", sans-serif;
  --article-font-body: "Manrope", sans-serif;

  --article-space-1: 0.25rem;
  --article-space-2: 0.5rem;
  --article-space-3: 0.75rem;
  --article-space-4: 1rem;
  --article-space-5: 1.5rem;
  --article-space-6: 2rem;
  --article-space-7: 3rem;
  --article-space-8: 4rem;
  --article-space-9: 5rem;
  --article-space-10: 6rem;
  --article-space-11: 7.5rem;

  --article-text-small: 0.78rem;
  --article-text-body: clamp(1.04rem, 1rem + 0.16vw, 1.12rem);
  --article-text-lead: clamp(1.16rem, 1.05rem + 0.35vw, 1.34rem);
  --article-text-h3: clamp(1.3rem, 1.16rem + 0.45vw, 1.55rem);
  --article-text-h2: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
  --article-text-display: clamp(2.75rem, 1.8rem + 3.2vw, 4.25rem);

  --article-leading-tight: 1;
  --article-leading-heading: 1.08;
  --article-leading-body: 1.76;

  --article-radius-small: 0.375rem;
  --article-rule: 0.0625rem;
  --article-control-height: 2.875rem;

  --article-duration-press: 100ms;
  --article-duration-hover: 180ms;
  --article-duration-disclosure: 400ms;
  --article-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --article-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}