/* ═══════════════════════════════════════════════════════════
   Turf Warz — Brand Style Guide v1.0
   Single source of truth for colors, fonts, grid texture,
   and typography across all public pages.
   Fonts loaded via site-chrome.js <link> injection.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --tw-bg:         #0c0d1c;
  --tw-surface:    #12112A;
  --tw-surface-a:  rgba(255,255,255,.04);
  --tw-border:     rgba(255,255,255,.09);
  --tw-border-mid: rgba(255,255,255,.14);
  --tw-accent:     #00c878;
  --tw-accent-hover: #1D9E75;
  --tw-accent-dim: rgba(0,200,120,.15);
  --tw-accent-bd:  rgba(0,200,120,.35);
  --tw-light-teal: #5DCAA5;
  --tw-text:       #FFFFFF;
  --tw-dim:        #9FA0C0;
  --tw-muted:      #6B6B9A;
  --tw-red:        #E24B4A;

  /* Legacy aliases — pages using unprefixed vars inherit these */
  --bg:            var(--tw-bg);
  --bg-surface:    var(--tw-surface-a);
  --bg-panel:      rgba(255,255,255,.035);
  --border:        var(--tw-border);
  --border-mid:    var(--tw-border-mid);
  --teal:          var(--tw-accent);
  --teal-dim:      var(--tw-accent-dim);
  --teal-border:   var(--tw-accent-bd);
  --teal-light:    var(--tw-light-teal);
  --text:          var(--tw-text);
  --text-dim:      var(--tw-dim);
  --text-muted:    var(--tw-muted);
  --red:           var(--tw-red);
}

/* ── Base ── */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background-color: #0c0d1c;
  background: var(--tw-bg);
  color: rgba(255,255,255,.88);
  line-height: 1.6;
}

/* ── Grid texture overlay ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,200,120,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,120,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Typography ── */
h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1;
}

/* ── Content sits above grid ── */
body > *:not(script):not(style) {
  position: relative;
  z-index: 1;
}