@font-face {
  font-family: "Ontology Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-variable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Ontology Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Ontology Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  font-size: 14px;

  /* Canonical Ontology color primitives. */
  --ontology-black: #050505;
  --ontology-carbon: #000000;
  --ontology-white: #ffffff;
  --ontology-ghost: #f9f9f9;
  --ontology-signal: #00c38b;
  --ontology-signal-text: var(--ontology-signal);

  /* Briefing product adaptation. */
  --ontology-paper: #f7f7f4;
  --ontology-paper-ink-2: #4b4b49;
  --ontology-paper-faint: #7d7d79;
  --ontology-paper-faint-readable: #656563;
  --ontology-paper-rule: #dcdcd6;
  --ontology-carbon-ink: #f5f5f0;
  --ontology-carbon-2: #a8aaa6;
  --ontology-carbon-rule: #292b29;

  /* Theme-semantic surface tokens. */
  --ontology-canvas: var(--ontology-black);
  --ontology-canvas-2: #0a0a0a;
  --ontology-ink: var(--ontology-white);
  --ontology-ink-2: rgba(255, 255, 255, 0.64);
  --ontology-faint: rgba(255, 255, 255, 0.56);
  --ontology-very-faint: rgba(255, 255, 255, 0.24);
  --ontology-rule: rgba(255, 255, 255, 0.1);
  --ontology-rule-strong: rgba(255, 255, 255, 0.2);
  --ontology-surface: rgba(255, 255, 255, 0.025);
  --ontology-signal-wash: rgba(0, 195, 139, 0.07);

  --ontology-text: "Ontology Inter", Inter, Arial, sans-serif;
  --ontology-mono: "Ontology Plex Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ontology-frame: 1440px;
  --ontology-reading: 900px;
  --ontology-header: 80px;
  --ontology-sidebar: 240px;
  --ontology-pad: 80px;

  --ontology-space-1: 4px;
  --ontology-space-2: 8px;
  --ontology-space-3: 12px;
  --ontology-space-4: 16px;
  --ontology-space-5: 24px;
  --ontology-space-6: 32px;
  --ontology-space-7: 48px;
  --ontology-space-8: 64px;
  --ontology-space-9: 80px;
  --ontology-space-10: 96px;
  --ontology-space-11: 128px;
  --ontology-space-12: 160px;

  --ontology-fast: 300ms;
  --ontology-theme: 500ms;
  --ontology-entry-fast: 700ms;
  --ontology-entry: 1000ms;
  --ontology-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --ontology-monument-weight: 900;
  --ontology-display-weight: 500;
  --ontology-headline-weight: 400;
  --ontology-body-weight: 400;
  --ontology-lede-weight: 300;
  --ontology-label-weight: 500;
  --ontology-monument-size: clamp(4.2rem, 12.4vw, 12.7rem);
  --ontology-monument-leading: 0.82;
  --ontology-monument-tracking: -0.06em;
  --ontology-display-size: clamp(4.2rem, 8vw, 8rem);
  --ontology-display-leading: 0.85;
  --ontology-display-tracking: -0.05em;
  --ontology-headline-size: clamp(2.25rem, 4vw, 3.75rem);
  --ontology-headline-leading: 1.1;
  --ontology-headline-tracking: -0.025em;
  --ontology-body-size: clamp(1.125rem, 1.15vw, 1.25rem);
  --ontology-body-leading: 1.625;
  --ontology-label-size: 0.625rem;
  --ontology-label-leading: 1.4;
  --ontology-label-tracking: 0.3em;
}

html[data-theme="light"] {
  color-scheme: light;
  --ontology-canvas: var(--ontology-white);
  --ontology-canvas-2: var(--ontology-ghost);
  --ontology-ink: var(--ontology-black);
  --ontology-ink-2: rgba(5, 5, 5, 0.68);
  --ontology-faint: rgba(5, 5, 5, 0.6);
  --ontology-very-faint: rgba(5, 5, 5, 0.24);
  --ontology-rule: rgba(5, 5, 5, 0.1);
  --ontology-rule-strong: rgba(5, 5, 5, 0.2);
  --ontology-surface: rgba(5, 5, 5, 0.025);
  --ontology-signal-text: #006b4f;
}

@media (max-width: 1023px) {
  :root {
    --ontology-pad: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --ontology-pad: 24px;
    --ontology-monument-size: clamp(3.5rem, 16.2vw, 6rem);
  }
}