/* ================================================================
   HammerTimeBet — Design System v2
   Shared tokens, utilities, and animations.
   Load via <link rel="stylesheet" href="/styles/design.css"> before
   any page-specific <style> blocks.
   ================================================================ */

:root {
  /* ── Background layers (deep blue-black, slight indigo tint) ── */
  --bg:  #07070f;
  --s1:  #0c0c1a;
  --s2:  #101020;
  --s3:  #151528;
  --s4:  #1a1a30;

  /* ── Borders — alpha-based so they work on any bg ── */
  --b1: rgba(255,255,255,.06);
  --b2: rgba(255,255,255,.10);
  --b3: rgba(255,255,255,.18);

  /* ── Text scale ── */
  --t0: #ffffff;
  --t1: #d8d8f0;
  --t2: #7878a0;
  --t3: #404058;
  --t4: #232335;

  /* ── Accent palette ── */
  --gold:   #f0b429;
  --indigo: #6366f1;
  --green:  #10b981;
  --red:    #ef4444;
  --teal:   #06b6d4;

  /* ── Typography ── */
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* ── Motion ── */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Legacy aliases ── old pages reference these directly ── */
  --w1: #ffffff;
  --w2: #d8d8f0;
  --w3: #7878a0;
  --w4: #404058;
  --b-border: rgba(255,255,255,.06);
  --r:  10px;
}

/* ── Base ─────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-pulse {
  0%, 100% { opacity: 1;  }
  50%       { opacity: .2; }
}
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}
@keyframes ds-mesh-drift {
  0%   { transform: translate(0,    0)    scale(1);    }
  33%  { transform: translate(1.5%, .8%)  scale(1.015); }
  66%  { transform: translate(-.8%, 1.5%) scale(.985);  }
  100% { transform: translate(0,    0)    scale(1);    }
}

/* ── Eyebrow label ────────────────────────────────────────────── */
.ds-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-eyebrow::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Section title ────────────────────────────────────────────── */
.ds-section-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t0);
}

/* ── Spinner ──────────────────────────────────────────────────── */
.ds-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.07);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Fade-up animation on reveal ─────────────────────────────── */
.ds-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-snap), transform .5s var(--ease-snap);
}
.ds-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}