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

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

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

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

:root {
  --page: #f3f6f2;
  --surface: #ffffff;
  --surface-raised: #e3ebe5;
  --ink: #17272b;
  --ink-soft: #52656a;
  --line: #c5d1cb;
  --line-strong: #8fa49a;
  --accent: #3f6f70;
  --accent-bright: #285f64;
  --focus: #285f64;
  --signal: #56758b;
  --proof-surface: #f8faf9;
  --proof-raised: #e3ebe5;
  --proof-ink: #17272b;
  --proof-muted: #52656a;
  --proof-grid: #c5d1cb;
  --proof-wash: #d6e6e2;
  --proof-signal: #3f6f70;
  --proof-technical: #456f78;
  --case-pass: #3c7062;
  --case-caution: #8c6f3d;
  --case-block: #8c4f4f;
  --case-field-accent: #3f6f70;
  --case-field-soft: #dce9e3;
  --case-launch-accent: #4e6b82;
  --case-launch-soft: #e1e8ed;
  --case-adoption-accent: #536f65;
  --case-adoption-soft: #e0e8e2;
  --case-technical-accent: #456f78;
  --case-technical-soft: #dce8ea;

  --font-display: "Archivo", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --type-tiny: 0.6875rem;
  --type-small: 0.8125rem;
  --type-body: clamp(1rem, 1.1vw, 1.125rem);
  --type-record: clamp(1.45rem, 2.4vw, 2.7rem);
  --type-section: clamp(2.8rem, 4.6vw, 4.5rem);
  --type-flagship: clamp(2.35rem, 3.8vw, 3.6rem);
  --type-hero: clamp(5rem, 10vw, 10.5rem);
  --type-case-hero: clamp(3.6rem, 7vw, 7rem);
  --type-case-heading: clamp(2.5rem, 4.2vw, 4.25rem);
  --type-route-hero: clamp(3rem, 5.5vw, 5.25rem);
  --type-route-heading: clamp(2.15rem, 3.6vw, 3.5rem);

  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.75rem;
  --space-6: 4.25rem;
  --space-7: clamp(4.75rem, 7vw, 7.5rem);
  --space-8: clamp(4.75rem, 7vw, 7.5rem);
  --page-pad: clamp(1.25rem, 5.4vw, 5.5rem);
  --content-max: 90rem;
  --header-height: 5.75rem;
  --index-gutter: clamp(2.6rem, 6vw, 6.25rem);
  --hairline: 1px;
  --control-radius: 0.75rem;
  --proof-min-height: 16rem;
  --proof-grid-unit: 2.75rem;
  --proof-node-min: 7.5rem;
  --proof-line: 2px;
  --credential-thumb-width: 9rem;
  --credential-thumb-ratio: 4 / 3;
  --portrait-max-height: 38rem;
  --atlas-stage-height: 25rem;
  --flagship-control-height: 4.5rem;
  --flagship-readout-height: 19rem;
  --technical-index-width: 20rem;
  --technical-control-height: 4.25rem;
  --technical-panel-min-height: 17rem;
  --technical-stage-min-height: 16rem;
  --case-stage-min: 15rem;
  --case-reading-measure: 44rem;
  --motion-fast: 160ms;
  --motion-standard: 300ms;
  --motion-transport: 620ms;
  --motion-switch-delay: 200ms;
  --motion-switch-cleanup: 660ms;
  --motion-crossover: 500ms;
  --opacity-photo-switch-start: 0.18;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
}