@font-face {
  font-family: "goormsans2";
  src: url("./goorm sans 2/Web/TTF/goorm-sans-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "goormsans2";
  src: url("./goorm sans 2/Web/TTF/goorm-sans-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "goormsans2";
  src: url("./goorm sans 2/Web/TTF/goorm-sans-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  /* Colors */
  --color-midnight-base: #0a0a0a;
  --color-storm-gray: #161616;
  --color-gunmetal: #282828;
  --color-slate-text: #686868;
  --color-ash-text: #b2b2b2;
  --color-silver-whisper: #c2c2c2;
  --color-ghost-white: #e5e5e5;
  --color-canvas-white: #ffffff;
  --color-gradient-aura: #4867af;
  --gradient-gradient-aura: linear-gradient(rgb(72, 103, 175), rgb(156, 175, 184), rgb(196, 149, 119));
  --color-interactive-glow: #19d0e8;
  --gradient-interactive-glow: radial-gradient(50% 50%, rgb(25, 208, 232) 0%, rgb(255, 255, 255) 100%);

  /* Typography — Font Families */
  --font-dm-sans: 'goormsans2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-machina: 'goormsans2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist: 'goormsans2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'goormsans2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: 0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.4px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: 0.45px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 32px;
  --leading-heading: 1.14;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.11;
  --text-display: 48px;
  --leading-display: 1;
  --tracking-display: -0.672px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 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-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 19px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 64px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-cards: 24px;
  --radius-buttons: 9999px;
  --radius-callouts: 10px;
  --radius-app-icons-ui: 10px;
  --radius-hero-sections: 40px;

  /* Surfaces */
  --surface-midnight-base: #0a0a0a;
  --surface-translucent-accent: #00000033;
  --surface-semi-transparent-overlay: #d4d4d41a;
}