@font-face {
  font-family: "PhysCam Trekker";
  src: url("../fonts/trekker-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PhysCam SF Pro Display";
  src: url("../fonts/sf-pro-display-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PhysCam SF Pro Display";
  src: url("../fonts/sf-pro-display-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "PhysCam SF Pro Display";
  src: url("../fonts/sf-pro-display-semibold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "PhysCam SF Pro Display";
  src: url("../fonts/sf-pro-display-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --color-bg: #0b0d0e;
  --color-bg-glow: rgba(124, 249, 0, 0.045);
  --color-topbar: rgba(11, 13, 14, 0.88);
  --color-sidebar: rgba(17, 19, 20, 0.72);
  --color-sidebar-mobile: #111314;
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-panel: rgba(27, 29, 30, 0.92);
  --color-panel-soft: rgba(36, 38, 39, 0.68);
  --color-panel-clear: rgba(24, 26, 27, 0.48);
  --color-line: #3d4143;
  --color-line-soft: rgba(255, 255, 255, 0.09);
  --color-text: #f3f4f4;
  --color-text-on-active: #0a0c0c;
  --color-text-soft: #b9bdc0;
  --color-text-dim: #858b8f;
  --color-active: #7cf900;
  --color-active-soft: rgba(124, 249, 0, 0.12);
  --color-active-line: rgba(124, 249, 0, 0.45);
  --color-warning: #f0b44a;

  --font-brand: "PhysCam Trekker", sans-serif;
  --font-display: "PhysCam SF Pro Display", sans-serif;
  --font-body: "PhysCam SF Pro Display", sans-serif;
  --font-mono: "PhysCam SF Pro Display", sans-serif;
  --font-weight-label: 650;
  --tracking-label: 0.08em;
  --tracking-label-wide: 0.12em;

  --text-2xs: 0.68rem;
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-heading-sm: 1.08rem;
  --text-heading-lg: 1.48rem;
  --text-brand: 1.4rem;
  --text-xl: clamp(1.7rem, 3vw, 2.3rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --border-subtle: 1px solid var(--color-line-soft);
  --progress-rail-width: 2px;
  --progress-current-height: 0.55rem;
  --sidebar-width: clamp(16rem, 13vw, 21rem);
  --toc-width: clamp(12rem, 11vw, 17rem);
  --topbar-height: clamp(4rem, 3.1vw, 5rem);
  --content-width: clamp(52rem, 64vw, 92rem);
  --reading-width: min(72ch, 100%);
  --page-gutter: clamp(1.5rem, 3vw, 4.5rem);
  --blur-topbar: 18px;
  --transition-fast: 120ms ease;
  --transition-standard: 180ms ease;
}