/* Single source: /DESIGN.md → Quick Start → CSS Custom Properties. */
/* DO 1/6: exact Lateral and Aeonik Pro families specified in DESIGN.md.
   Font sources are the public assets referenced by https://slush.app/.
   These are remote font references, not new design tokens. */
@font-face {
  font-family: 'Lateral';
  src: url('https://cdn.prod.website-files.com/680905cfdc450738383648a6/680905cfdc450738383648d3_LateralVariable-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 800; /* DESIGN.md: --font-weight-extrabold / DO 1. */
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik Pro';
  src: url('https://cdn.prod.website-files.com/680905cfdc450738383648a6/680905cfdc450738383648d2_AeonikPro-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700; /* DESIGN.md: --font-weight-bold / DO 6. */
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik Pro';
  src: url('https://cdn.prod.website-files.com/680905cfdc450738383648a6/680905cfdc450738383648d1_AeonikPro-Medium.otf') format('opentype');
  font-style: normal;
  font-weight: 500; /* DESIGN.md: --font-weight-medium / body. */
  font-display: swap;
}
:root {
  /* Colors */
  --color-carbon: #000000; /* DESIGN.md token: --color-carbon */
  --color-paper-white: #ffffff; /* DESIGN.md token: --color-paper-white */
  --color-sky-wash: #dceeff; /* DESIGN.md token: --color-sky-wash */
  --color-concrete-gray: #cccccc; /* DESIGN.md token: --color-concrete-gray */
  --color-soft-mist: #e9e9e9; /* DESIGN.md token: --color-soft-mist */
  --color-electric-blue: #4da2ff; /* DESIGN.md token: --color-electric-blue */
  --color-mint-pop: #55db9c; /* DESIGN.md token: --color-mint-pop */
  --color-lavender: #e9ccff; /* DESIGN.md token: --color-lavender */
  --color-ember: #fb4903; /* DESIGN.md token: --color-ember */
  --color-sunburst: #ffd731; /* DESIGN.md token: --color-sunburst */
  --color-voltage-violet: #5c4ade; /* DESIGN.md token: --color-voltage-violet */

  /* Typography — Font Families */
  --font-lateral: 'Lateral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* DESIGN.md token: --font-lateral */
  --font-aeonik-pro: 'Aeonik Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* DESIGN.md token: --font-aeonik-pro */

  /* Typography — Scale */
  --text-caption: 12px; /* DESIGN.md token: --text-caption */
  --leading-caption: 1.56; /* DESIGN.md token: --leading-caption */
  --tracking-caption: -0.01px; /* DESIGN.md token: --tracking-caption */
  --text-body-lg: 15px; /* DESIGN.md token: --text-body-lg */
  --leading-body-lg: 1.39; /* DESIGN.md token: --leading-body-lg */
  --tracking-body-lg: -0.01px; /* DESIGN.md token: --tracking-body-lg */
  --text-subheading: 24px; /* DESIGN.md token: --text-subheading */
  --leading-subheading: 1.2; /* DESIGN.md token: --leading-subheading */
  --tracking-subheading: -0.01px; /* DESIGN.md token: --tracking-subheading */
  --text-heading-sm: 30px; /* DESIGN.md token: --text-heading-sm */
  --leading-heading-sm: 1.1; /* DESIGN.md token: --leading-heading-sm */
  --tracking-heading-sm: -0.01px; /* DESIGN.md token: --tracking-heading-sm */
  --text-heading: 64px; /* DESIGN.md token: --text-heading */
  --leading-heading: 1; /* DESIGN.md token: --leading-heading */
  --tracking-heading: -0.01px; /* DESIGN.md token: --tracking-heading */
  --text-display: 200px; /* DESIGN.md token: --text-display */
  --leading-display: 0.8; /* DESIGN.md token: --leading-display */
  --tracking-display: 0px; /* DESIGN.md token: --tracking-display */
  --text-display-lg: 640px; /* DESIGN.md token: --text-display-lg */
  --leading-display-lg: 0.75; /* DESIGN.md token: --leading-display-lg */
  --tracking-display-lg: 0px; /* DESIGN.md token: --tracking-display-lg */

  /* Typography — Weights */
  --font-weight-medium: 500; /* DESIGN.md token: --font-weight-medium */
  --font-weight-bold: 700; /* DESIGN.md token: --font-weight-bold */
  --font-weight-extrabold: 800; /* DESIGN.md token: --font-weight-extrabold */

  /* Spacing */
  --spacing-unit: 4px; /* DESIGN.md token: --spacing-unit */
  --spacing-4: 4px; /* DESIGN.md token: --spacing-4 */
  --spacing-8: 8px; /* DESIGN.md token: --spacing-8 */
  --spacing-12: 12px; /* DESIGN.md token: --spacing-12 */
  --spacing-16: 16px; /* DESIGN.md token: --spacing-16 */
  --spacing-20: 20px; /* DESIGN.md token: --spacing-20 */
  --spacing-24: 24px; /* DESIGN.md token: --spacing-24 */
  --spacing-28: 28px; /* DESIGN.md token: --spacing-28 */
  --spacing-32: 32px; /* DESIGN.md token: --spacing-32 */
  --spacing-40: 40px; /* DESIGN.md token: --spacing-40 */
  --spacing-44: 44px; /* DESIGN.md token: --spacing-44 */
  --spacing-48: 48px; /* DESIGN.md token: --spacing-48 */
  --spacing-60: 60px; /* DESIGN.md token: --spacing-60 */
  --spacing-80: 80px; /* DESIGN.md token: --spacing-80 */
  --spacing-128: 128px; /* DESIGN.md token: --spacing-128 */
  --spacing-180: 180px; /* DESIGN.md token: --spacing-180 */
  --spacing-224: 224px; /* DESIGN.md token: --spacing-224 */

  /* Layout */
  --page-max-width: 1440px; /* DESIGN.md token: --page-max-width */
  --section-gap: 48px; /* DESIGN.md token: --section-gap */
  --card-padding: 24px; /* DESIGN.md token: --card-padding */
  --element-gap: 4-12px; /* DESIGN.md token: --element-gap */

  /* Border Radius */
  --radius-2xl: 16px; /* DESIGN.md token: --radius-2xl */
  --radius-2xl-2: 20px; /* DESIGN.md token: --radius-2xl-2 */
  --radius-3xl: 30px; /* DESIGN.md token: --radius-3xl */
  --radius-3xl-2: 40px; /* DESIGN.md token: --radius-3xl-2 */
  --radius-full: 1440px; /* DESIGN.md token: --radius-full */
  --radius-full-2: 1500px; /* DESIGN.md token: --radius-full-2 */
  --radius-full-3: 1600px; /* DESIGN.md token: --radius-full-3 */

  /* Named Radii */
  --radius-nav: 1600px; /* DESIGN.md token: --radius-nav */
  --radius-body: 30px; /* DESIGN.md token: --radius-body */
  --radius-cards: 20px; /* DESIGN.md token: --radius-cards */
  --radius-pills: 1600px; /* DESIGN.md token: --radius-pills */
  --radius-buttons: 1600px; /* DESIGN.md token: --radius-buttons */
  --radius-wallet-icon: 16px; /* DESIGN.md token: --radius-wallet-icon */
  --radius-cards-elevated: 40px; /* DESIGN.md token: --radius-cards-elevated */

  /* Surfaces */
  --surface-sky-wash: #dceeff; /* DESIGN.md token: --surface-sky-wash */
  --surface-paper-white: #ffffff; /* DESIGN.md token: --surface-paper-white */
  --surface-concrete-gray: #cccccc; /* DESIGN.md token: --surface-concrete-gray */
  --surface-sticker-surfaces: #e9ccff; /* DESIGN.md token: --surface-sticker-surfaces */
}

/* Named aliases below only expose values explicitly listed in DESIGN.md. */
:root {
  --text-label: 13px; /* Typography → Aeonik Pro → Sizes: 13px. */
  --text-button: 14px; /* Components → Outlined Ghost Button: 13–14px. */
  --tracking-label: 0.032em; /* DO 6: nav/button/uppercase label tracking. */
  --tracking-button: 0.030em; /* DO 6: nav/button tracking. */
  --leading-display-tight: 0.75; /* DO 1 / Typography: 0.75–0.80. */
  --border-width: 1px; /* DO 3: 1px black outline. */
  --border-standard: var(--border-width) solid var(--color-carbon); /* DO 3. */
}

/* DESIGN.md → Verified hero reference: fluid version of the existing 16px unit.
   These four source breakpoints scale hero artwork, spacing and existing type roles. */
:root { --reference-unit: calc(clamp(992px, 100vw, 2250px) / 90); }
@media (max-width:991px) { :root { --reference-unit: calc(clamp(768px, 100vw, 991px) / 75); } }
@media (max-width:767px) { :root { --reference-unit: calc(clamp(480px, 100vw, 767px) / 34.375); } }
@media (max-width:479px) { :root { --reference-unit: calc(clamp(320px, 100vw, 479px) / 24.375); } }