/* Font system using CSS custom properties (variables) */
:root {
  /* Font families with system fallbacks */
  --font-primary:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes */
  --font-size-xxsmall: 0.75rem; /* 10px */
  --font-size-xsmall: 0.8rem; /* 12px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-medium: 1.25rem; /* 20px */
  --font-size-large: 1.5rem; /* 24px */
  --font-size-xlarge: 2rem; /* 32px */
  --font-size-xxlarge: 2.5rem; /* 40px */
  --font-size-hero: 3.5rem; /* 56px */

  /* Colors */
  --text-white: #ffffff;
  --text-muted-foreground: #e2e2e2;
  --primary-color: #ffffff;
  --button-hover: rgba(255, 255, 255, 0.2);
  --background-dark: #111111;
  --card-background: #1d1d1d;
  --card-gradient-light: rgba(92, 92, 92, 0.2);
  --card-gradient-dark: rgba(29, 29, 29, 0.2);
  --gradient-primary: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(79, 32, 197, 1) 100%
  );

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 50px;
  --spacing-xxl: 80px;

  /* Border Radius */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;

  /* Max Widths */
  --max-width-content: 1200px;
  --max-width-wide: 1500px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Custom Scrollbar Styling */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-dark);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
  background: rgba(79, 32, 197, 0.8);
  border-radius: var(--border-radius-sm);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 32, 197, 1);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(79, 32, 197, 0.6);
}

/* Firefox scrollbar styling */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 32, 197, 0.8) var(--background-dark);
}

.starry-background {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      3px 3px at 10.1% 15.2%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 65.9% 20.8%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      3px 3px at 85.3% 70.1%,
      rgba(255, 255, 255, 0.95),
      transparent
    ),
    radial-gradient(
      2px 2px at 20.5% 88.9%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 75.1% 32.7%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      3px 3px at 42.8% 95.3%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2px 2px at 90.4% 5.6%,
      rgba(255, 255, 255, 0.75),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 30.9% 40.2%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      3px 3px at 55.6% 77.8%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2px 2px at 15.2% 5.9%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 50.1% 10.4%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1.8px 1.8px at 12.7% 63.8%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 80.1% 55.9%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1.8px 1.8px at 35.4% 75.3%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 5.8% 30.6%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1.8px 1.8px at 92.2% 85.1%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 60.9% 3.7%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1.8px 1.8px at 25.1% 52.2%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 48.3% 22.9%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1.8px 1.8px at 70.6% 90.1%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 24.9% 8.7%,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 70.4% 45.2%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 50.6% 80.4%,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 3.1% 70.8%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 82.7% 12.3%,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 15.6% 34.5%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 68.9% 97.1%,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 40.5% 60.2%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 95.9% 51.7%,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 7.2% 2.3%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);

  background-size:
    450px 310px,
    612px 430px,
    385px 255px,
    660px 510px,
    520px 365px,
    430px 300px,
    575px 450px,
    350px 235px,
    345px 225px,
    455px 375px,
    510px 410px,
    375px 255px,
    620px 435px,
    265px 180px,
    225px 150px,
    330px 250px,
    440px 360px,
    550px 430px,
    275px 190px,
    365px 280px,
    590px 480px,
    315px 200px,
    410px 340px,
    490px 390px,
    650px 530px,
    300px 210px,
    470px 320px,
    530px 400px,
    280px 170px,
    600px 490px,
    100% 100%;
  background-repeat: repeat;
  z-index: 1;
}

.starry-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background:
    radial-gradient(
      1.2px 1.2px at 15.7% 25.4%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 72.2% 54.9%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 40.8% 83.3%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 85.4% 20.7%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 28.6% 10.8%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 64.9% 75.2%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 9.3% 60.7%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 90.8% 38.2%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 22.5% 44.1%,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 58.1% 18.3%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 78.9% 68.6%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 3.5% 91.1%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 45.6% 5.9%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 69.2% 98.4%,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      0.8px 0.8px at 98.1% 7.7%,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  background-size:
    250px 165px,
    370px 220px,
    425px 320px,
    500px 360px,
    330px 250px,
    450px 340px,
    215px 175px,
    550px 420px,
    300px 200px,
    400px 300px,
    280px 190px,
    520px 400px,
    350px 280px,
    480px 350px,
    600px 450px;
  animation: twinkle 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}

@keyframes twinkle {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}