:root {
  /* Colors */
  --color-void: #010101;
  --gradient-void: linear-gradient(0deg, #010101 30%, rgba(26, 26, 26, 0.9));
  --color-charcoal-control: #1f1f23;
  --color-porcelain: #e0e0e0;
  --color-machine-well: #16191b;
  --color-hairline-ash: #252525;
  --color-muted-steel: #828b8d;
  --color-dormant-graphite: #444444;
  --color-faint-steel: #646e71;

  /* Typography — Font Families */
  --font-office-times-round: 'Office Times Round', 'Cormorant Garamond', Georgia, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-messina-sans: 'Messina Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-laica-mono: 'ABC Laica Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-micro-label: 10px;
  --leading-micro-label: 1.4;
  --tracking-micro-label: 2.4px;
  --text-utility-nav: 13px;
  --leading-utility-nav: 1.4;
  --tracking-utility-nav: 1.04px;
  --text-utility-nav-tight: 13px;
  --leading-utility-nav-tight: 1.3;
  --tracking-utility-nav-tight: 1.04px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0px;
  --text-body-large: 18px;
  --leading-body-large: 1.4;
  --tracking-body-large: 0px;
  --text-module-heading: 26px;
  --leading-module-heading: 1.2;
  --tracking-module-heading: -0.52px;
  --text-feature-heading: 32px;
  --leading-feature-heading: 1.2;
  --tracking-feature-heading: -0.64px;
  --text-display: 100px;
  --leading-display: 1;
  --tracking-display: -3px;
  --text-display-monumental: 200px;
  --leading-display-monumental: 0.8;
  --tracking-display-monumental: -6px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  --spacing-192: 192px;
  --spacing-224: 224px;

  /* Layout */
  --page-max-width: 940px;
  --section-gap: 40px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-full: 80px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-pills: 100px;
  --radius-badges: 100px;
  --radius-images: 80px;
  --radius-inputs: 0px;
  --radius-buttons: 100px;
  --radius-compact-cards: 8px;

  /* Surfaces */
  --surface-void-canvas: #010101;
  --surface-machine-well: #16191b;
  --surface-charcoal-control: #1f1f23;
}