:root {
  /* Colors */
  --color-primary: #006BA8;
  --color-primary-light: #2EA7FE;
  --color-secondary: #9D57FF;
  --color-tertiary: #D300C8;
  --color-mesh-1: #D300C8;
  --color-mesh-2: #9D57FF;
  --color-mesh-3: #2EA7FE;
  --color-mesh-4: #006BA8;

  --color-background: #13242F;
  --color-background-soft: #1B2E3A;
  --color-surface: #203543;
  --color-surface-hover: #263e4f;
  --color-surface-alt: #284252;
  --color-surface-glass: rgba(19, 36, 47, 0.4);
  --color-border: #1B2E3A;
  --color-border-hover: #5d8194;

  --color-text-primary: #EEEFFF;
  --color-text-secondary: #DBDCED;
  --color-text-muted: #8FA6B2;
  --color-text-highlight: #2EA7FE;

  --color-white-alpha-04: rgba(238, 239, 255, 0.04);
  --color-white-alpha-08: rgba(238, 239, 255, 0.08);
  --color-white-alpha-16: rgba(238, 239, 255, 0.16);
  --color-white-alpha-24: rgba(238, 239, 255, 0.24);
  --color-white-alpha-32: rgba(238, 239, 255, 0.32);
  --color-white-alpha-40: rgba(238, 239, 255, 0.40);
  --color-white-alpha-48: rgba(238, 239, 255, 0.48);
  --color-white-alpha-56: rgba(238, 239, 255, 0.56);
  --color-white-alpha-64: rgba(238, 239, 255, 0.64);
  --color-white-alpha-72: rgba(238, 239, 255, 0.72);
  --color-white-alpha-80: rgba(238, 239, 255, 0.80);
  --color-white-alpha-88: rgba(238, 239, 255, 0.88);
  --color-white-alpha-96: rgba(238, 239, 255, 0.96);

  --gradient-primary: linear-gradient(to right,
      var(--color-primary) 0%,
      var(--color-secondary) 50%,
      var(--color-tertiary) 100%);

  /* Typography - Font Families */
  --font-primary: "Inter", Arial, sans-serif;
  --font-display: "Epilogue", sans-serif;

  /* Typography - Scale */
  --text-display-lg-size: 40px;
  --text-display-lg-weight: 700;
  --text-display-lg-height: 1.4;
  --text-display-lg-spacing: -0.02em;

  --text-heading-xl-size: 32px;
  --text-heading-xl-weight: 700;
  --text-heading-xl-height: 1.4;
  --text-heading-xl-spacing: -0.01em;

  --text-heading-lg-size: 24px;
  --text-heading-lg-weight: 600;
  --text-heading-lg-height: 1.4;
  --text-heading-lg-spacing: 0em;

  --text-heading-md-size: 20px;
  --text-heading-md-weight: 600;
  --text-heading-md-height: 1.4;
  --text-heading-md-spacing: 0em;

  --text-body-lg-size: 16px;
  --text-body-lg-weight: 400;
  --text-body-lg-height: 1.6;
  --text-body-lg-spacing: 0em;

  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-height: 1.5;
  --text-body-md-spacing: 0em;

  --text-label-md-size: 12px;
  --text-label-md-weight: 500;
  --text-label-md-height: 1.4;
  --text-label-md-spacing: 0.04em;

  /* Spacing Scale (4px rhythm) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Macro Spacing constraints */
  --macro-space-sm: var(--space-48);
  --macro-space-md: var(--space-64);
  --macro-space-lg: var(--space-96);

  /* Radius Scale */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-64: 64px;
  --radius-full: 50%;

  /* Line Heights */
  --line-height-relaxed: 1.65;

  /* Transitions */
  --transition-fast: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}