/* ── BASE RESET & GLOBAL STYLES ── */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap');

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--dark-900);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--green-400); }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

input, button, textarea, select {
  font-family: var(--font);
  font-size: 1rem;
  outline: none;
  border: none;
}

button { cursor: pointer; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-800); }
::-webkit-scrollbar-thumb { background: var(--dark-600); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--green-700); }

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ── TYPOGRAPHY ── */
.text-green  { color: var(--green-400); }
.text-gold   { color: var(--gold-400); }
.text-red    { color: var(--red-400); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.text-sm  { font-size: 0.875rem; }
.text-xs  { font-size: 0.75rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black   { font-weight: 900; }

.text-center { text-align: center; }
.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

/* ── FLEX/GRID UTILS ── */
.flex        { display: flex; }
.grid        { display: grid; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ── SPACING UTILS ── */
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ── HIDDEN / VISIBLE ── */
.hidden { display: none !important; }
.visible { display: block !important; }

/* ── PRELOADER ── */
#preloader {
  position: fixed; inset: 0;
  background: var(--dark-950);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-4);
  transition: opacity 0.5s ease;
}
#preloader.fade-out { opacity: 0; pointer-events: none; }
.preloader-ball {
  font-size: 3rem;
  animation: spin 1s linear infinite;
}
.preloader-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── PAGE WRAPPER (accounts for header + banner) ── */
.page-content { padding-top: var(--header-h); }
.page-content.with-banner { padding-top: calc(var(--header-h) + var(--banner-h)); }

/* ── SECTION ── */
.section { padding-block: var(--sp-16); }
.section-sm { padding-block: var(--sp-10); }

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--glass-border);
  margin-block: var(--sp-6);
}

/* ── TOAST NOTIFICATIONS ── */
#toast-container {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.toast {
  background: var(--dark-700);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--sh-lg);
  animation: slideInRight 0.3s ease forwards;
  max-width: 360px;
}
.toast.success { border-color: var(--green-600); }
.toast.error   { border-color: var(--red-500); }
.toast.warning { border-color: var(--orange-500); }
.toast-icon { font-size: 1.25rem; flex-shrink: 0; }

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-10); }
}