/* Base CSS - Shared styles, variables, fonts, and animations */

/* CSS Custom Properties (Variables) */
:root {
  /* Colors */
  --bg-primary: #0a0a0f;
  --bg-secondary: #1a1a17;
  --bg-tertiary: #242222;
  --text-primary: #f0f0f5;
  --text-secondary: #8b8b9e;
  --accent: #a78bfa;

  /* Tier colors */
  --tier-s: #60a5fa;
  --tier-a: #4ade80;
  --tier-b: #a3e635;
  --tier-c: #facc15;
  --tier-d: #fb923c;
  --tier-f: #f87171;

  /* Font */
  --font-sans: "Open Sans", sans-serif;
}

/* Open Sans - Self-hosted */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/font/open-sans-v44-latin-regular.woff2") format("woff2"),
    url("/static/font/open-sans-v44-latin-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/font/open-sans-v44-latin-600.woff2") format("woff2"),
    url("/static/font/open-sans-v44-latin-600.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/font/open-sans-v44-latin-700.woff2") format("woff2"),
    url("/static/font/open-sans-v44-latin-700.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/font/open-sans-v44-latin-800.woff2") format("woff2"),
    url("/static/font/open-sans-v44-latin-800.ttf") format("truetype");
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Animation Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease;
}

.animate-slide-up {
  animation: slideUp 0.3s ease;
}

/* Common link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Common button reset */
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}