:root {
  /* Colors */
  --color-void-black: #020202;
  --color-surface-black: #000000;
  --color-charcoal-hairline: #292a2c;
  --color-bone-white: #ffffff;
  --color-ash-gray: #9b9b9b;

  /* Typography — Font Families */
  --font-opx-medium: 'OPX-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-untitled: 'Untitled', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.67;
  --text-body: 18px;
  --leading-body: 1.67;
  --text-subheading: 20px;
  --leading-subheading: 1.67;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.42;
  --text-heading: 35px;
  --leading-heading: 1.4;
  --text-heading-lg: 50px;
  --leading-heading-lg: 1.38;
  --text-display: 80px;
  --leading-display: 1.07;
  --text-display-xl: 111px;
  --leading-display-xl: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-21: 21px;
  --spacing-30: 30px;
  --spacing-50: 50px;
  --spacing-80: 80px;
  --spacing-99: 99px;
  --spacing-100: 100px;
  --spacing-150: 150px;
  --spacing-200: 200px;

  /* Layout */
  --section-gap: 100px;
  --element-gap: 30px;

  /* Border Radius */
  --radius-3xl: 45px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-links: 45px;
  --radius-images: 0px;
  --radius-buttons: 45px;

  /* Surfaces */
  --surface-void-canvas: #020202;
  --surface-surface-black: #000000;
  --surface-hairline: #292a2c;
}