/* ============================================================
   POB — Protect Our Balls
   Design Tokens — v2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-blackout);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── Color Palette ── */
:root {
  --color-blackout:   #0D0D0D;
  --color-dark-earth: #2C2416;
  --color-od-green:   #4A5240;
  --color-coyote:     #8B6F47;
  --color-ranger-tan: #C8A96E;
  --color-steel:      #6B7C8A;
  --color-alert-red:  #C0392B;
  --color-white:      #F0EDE8;
  --color-white-dim:  rgba(240, 237, 232, 0.6);
  --grid-line:        rgba(74, 82, 64, 0.15);

  /* ── Typography ── */
  --font-display: 'Black Ops One', cursive;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  /* ── Type Scale ── */
  --text-xs:   0.6rem;
  --text-sm:   0.75rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.4rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;
  --text-hero: clamp(5rem, 15vw, 10rem);

  /* ── Spacing ── */
  --space-v: 80px;
  --space-h: 40px;
  --max-w:   1200px;
}

/* ── Utility ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-h);
}

@media (max-width: 640px) {
  :root {
    --space-v: 48px;
    --space-h: 20px;
  }
}