@layer tokens {
  @font-face {
    font-family: "Instrument Serif";
    src: url("../vendor/fonts/instrument-serif-latin-400.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
  }

  @font-face {
    font-family: "Instrument Sans";
    src: url("../vendor/fonts/instrument-sans-latin-variable.woff2") format("woff2-variations");
    font-display: swap;
    font-style: normal;
    font-weight: 400 700;
  }

  :root {
    color-scheme: light;
    --font-display: "Instrument Serif", Georgia, serif;
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

    --text-xs: clamp(0.750rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
    --text-base: clamp(1.000rem, 0.97rem + 0.20vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.250rem);
    --text-xl: clamp(1.375rem, 1.25rem + 0.60vw, 1.625rem);
    --text-2xl: clamp(1.750rem, 1.50rem + 1.10vw, 2.250rem);
    --text-3xl: clamp(2.250rem, 1.80rem + 2vw, 3rem);
    --leading-display: 1.12;
    --leading-body: 1.55;
    --leading-ui: 1.35;
    --measure: 68ch;

    --surface-0: oklch(98.6% 0.008 85);
    --surface-1: oklch(96.4% 0.011 85);
    --surface-raised: oklch(100% 0 0);
    --border-subtle: oklch(89% 0.012 85);
    --border-strong: oklch(78% 0.014 85);
    --text-strong: oklch(24% 0.022 250);
    --text-body: oklch(34% 0.018 250);
    --text-muted: oklch(50% 0.014 250);
    --accent: oklch(43% 0.100 315);
    --accent-hover: oklch(36% 0.104 315);
    --accent-wash: oklch(95% 0.020 315);
    --accent-contrast: oklch(99% 0 0);
    --positive: oklch(52% 0.105 255);
    --warning: oklch(68% 0.128 75);
    --critical: oklch(50% 0.158 27);
    --unknown: oklch(72% 0.008 85);
    --focus-ring: oklch(52% 0.140 240);
    --band-1: oklch(93% 0.018 80);
    --band-2: oklch(85% 0.035 345);
    --band-3: oklch(73% 0.055 330);
    --band-4: oklch(55% 0.078 315);
    --band-5: oklch(43% 0.090 305);
    --band-unknown: var(--unknown);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --shadow-raised: 0 1px 2px oklch(24% 0.02 250 / 0.04), 0 8px 24px -12px oklch(24% 0.02 250 / 0.14);
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-map: 220ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --page-gutter: clamp(1rem, 3vw, 3rem);
    --content-wide: 90rem;
    --content-reading: 48rem;
    --control-height: 2.75rem;
  }
}