@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* Base Colors */
  --color-bg: black;
  --color-surface: rgba(0, 0, 0, 0.2);
  --color-border: rgba(255, 190, 32, 0.1);

  /* Text Colors */
  --color-text-80: rgba(255, 255, 255, 0.9);
  --color-text-50: rgba(255, 255, 255, 0.78);
  --color-text-30: rgba(255, 255, 255, 0.64);

  /* Accent */
  --color-cyan: rgb(0, 255, 132);
  --color-yellow: rgb(255, 190, 32);

  /* Transitions */
  --transition:
    transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;

  /* Typography scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 17px;
  --font-lg: 18px;
  --font-xl: 24px;

  /* Margins */
  --margin-xs: 5px;
  --margin-sm: 10px;
  --margin-base: 15px;
  --margin-lg: 20px;
  --margin-xl: 30px;
  --margin-2xl: 40px;

  --border-radius: 10px;
}

@media (max-width: 800px) {
  :root {
    --font-xs: 10px;
    --font-sm: 12px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 22px;
  }
}

@media (max-width: 430px) {
  :root {
    --margin-xs: 3px;
    --margin-sm: 8px;
    --margin-base: 10px;
    --margin-lg: 15px;
    --margin-xl: 20px;
    --margin-2xl: 30px;
  }
}

@media (max-width: 400px) {
  :root {
    --font-xs: 9px;
    --font-sm: 11px;
    --font-base: 12px;
    --font-md: 13px;
    --font-lg: 14px;
    --font-xl: 18px;
  }
}