:root {
  /* Colors */
  --color-primary: #009ff2;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #4a4a4a;
  --color-gray-medium: #7c7c7c;
  --color-gray-light: #bdbdbd;
  --color-gray-lighter: #bebebe;
  --color-gray-border: #e2e2e2;
  --color-gray-bg: #c6c6c6;
  --color-gold: #d3c2a3;
  --color-dark-bg: #0e0e0e;

  /* Typography */
  --font-family-primary: 'DM Sans', sans-serif;
  --font-family-mono: 'DM Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 22px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-2xl: 42px;
  --font-size-3xl: 58px;
  --font-size-4xl: 82px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-xs: 18.228px;
  --line-height-sm: 20.832px;
  --line-height-md: 26.4px;
  --line-height-lg: 28.644px;
  --line-height-xl: 31.248px;
  --line-height-2xl: 41.664px;
  --line-height-3xl: 48px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 60px;

  /* Border Radius */
  --border-radius-sm: 10px;
  --border-radius-md: 12px;
  --border-radius-lg: 15px;
  --border-radius-xl: 25px;

  /* Container */
  --container-max-width: 1680px;
  --container-content-width: 1440px;
}