/* =========================================================
   Tribe Life – Global Site CSS (updated with your images + palette)
   Put this file where your app already imports it (e.g., src/site.css).
   ========================================================= */

/* ====== Base (existing) ====== */
:root{
  --bg:#0b0e13; --panel:#111827; --panel-2:#0f172a;
  --muted:#94a3b8; --text:#e5e7eb; --accent:#38bdf8; --accent-2:#a78bfa; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --ring:#334155; --card:#0b1220; --border:#1f2937;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius: 12px;
}

/* ====== Tribe Life brand palette (from your image) ======
   Use these variables directly or via the utility classes below. */
:root{
  --tl-black:  #000000;
  --tl-green:  #0e6251;
  --tl-salmon: #cc8866;
  --tl-sage:   #a8b5a2;
  --tl-mauve:  #6b4965;
  --tl-indigo: #2f2d57;
  --tl-yellow: #e3be33;
  --tl-cream:  #f1e6d2;
}

/* If you want links/buttons to follow your brand by default,
   point the site "accent" to your brand green. */
:root { --accent: var(--tl-green); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(160deg,#0a0f1a 0%, #0e1420 45%, #0a0f1a 100%);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

/* ====== Layout helpers ====== */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.section{padding:28px 0}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ====== Header / Top banner ====== */
.top-banner{
  background:#0f172a; color:#dbeafe; text-align:center; padding:8px 10px; font-size:13px;
  border-bottom:1px solid #1f2937;
}
.top-banner a{color:#93c5fd; text-decoration:none; border-bottom:1px dashed #93c5fd}
.top-banner a:hover{color:#bfdbfe; border-bottom-color:#bfdbfe}

.site-header{
  position:sticky; top:0; z-index:30; background:rgba(13,18,29,.85); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}

/* If you keep an <img> icon element for the brand */
.brand img{width:28px;height:28px; object-fit:contain}

/* Or: add class="brand-badge" to the brand text to render the flame before it
   (this uses the file in /public; if the filename has a space we need %20). */
.brand-badge{
  position:relative;
  padding-left:28px;              /* room for icon */
}
.brand-badge::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:20px; height:20px; transform:translateY(-50%);
  background-image:url("/tribe%20flame.png"); /* rename to tribe-flame.png if you prefer, then change URL */
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

.navlinks{display:flex; gap:18px}
.navlinks a{
  color:#cbd5e1; text-decoration:none; padding:6px 8px; border-radius:8px; transition:.15s ease;
}
.navlinks a:hover{color:#fff; background:#0b1220; box-shadow: inset 0 0 0 1px #1f2937}
.cta-today{
  margin-left:14px; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px;
  background:linear-gradient(135deg,var(--tl-green),#22d3ee); color:#001018; text-decoration:none;
  box-shadow:0 6px 16px rgba(34,211,238,.25); border:0;
}
.cta-today:hover{filter:brightness(1.05)}

/* ====== Hero banner ====== */
.hero{border-bottom:1px solid var(--border)}
.hero img{display:block; width:100%; height:auto; border-bottom-left-radius:8px; border-bottom-right-radius:8px}

/* Wallpaper utility for the homepage hero container.
   Apply class="hero-wallpaper" on the hero <section> wrapper. */
.hero-wallpaper{
  background-image:url("/unstoppable.png"); /* served from /public */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ====== Page links / buttons ====== */
a{color:var(--accent); text-decoration:none}
a:hover{color:#7dd3fc; text-decoration:underline}
.link-btn{
  display:inline-block; padding:8px 12px; border-radius:8px; background:#0b1220; border:1px solid #1f2937; color:#e2e8f0;
}
.link-btn:hover{background:#111827; text-decoration:none}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--border); color:#94a3b8; padding:24px 0; text-align:center}

/* ====== Brand color utilities (use anywhere) ====== */
.bg-tl-black{background-color:var(--tl-black)}   .text-tl-black{color:var(--tl-black)}
.bg-tl-green{background-color:var(--tl-green)}   .text-tl-green{color:var(--tl-green)}
.bg-tl-salmon{background-color:var(--tl-salmon)} .text-tl-salmon{color:var(--tl-salmon)}
.bg-tl-sage{background-color:var(--tl-sage)}     .text-tl-sage{color:var(--tl-sage)}
.bg-tl-mauve{background-color:var(--tl-mauve)}   .text-tl-mauve{color:var(--tl-mauve)}
.bg-tl-indigo{background-color:var(--tl-indigo)} .text-tl-indigo{color:var(--tl-indigo)}
.bg-tl-yellow{background-color:var(--tl-yellow)} .text-tl-yellow{color:var(--tl-yellow)}
.bg-tl-cream{background-color:var(--tl-cream)}   .text-tl-cream{color:var(--tl-cream)}

/* ============== Tailwind-lite for Brain UI (kept) ============== */
/* spacing */
.p-2{padding:8px} .p-3{padding:12px} .p-4{padding:16px} .p-6{padding:24px}
.mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.mx-auto{margin-left:auto;margin-right:auto}
/* layout */
.grid{display:grid} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
/* colors (original utilities kept) */
.bg-gray-800{background:#1f2937} .bg-gray-900{background:#111827}
.bg-indigo-700{background:#4338ca} .bg-indigo-800{background:#3730a3}
.bg-blue-700{background:#1d4ed8} .bg-green-600{background:#16a34a} .bg-red-600{background:#dc2626}
.bg-purple-700{background:#6d28d9} .bg-purple-600{background:#7c3aed}
.bg-cyan-700{background:#0e7490}
.text-white{color:#fff} .text-gray-200{color:#e5e7eb} .text-gray-300{color:#d1d5db} .text-gray-400{color:#9ca3af}
.text-blue-300{color:#93c5fd} .text-purple-300{color:#c4b5fd} .text-green-300{color:#86efac}
.text-yellow-400{color:#facc15}
/* borders / radius */
.border{border:1px solid var(--border)} .border-blue-500{border-color:#3b82f6} .border-purple-500{border-color:#8b5cf6}
.rounded{border-radius:8px} .rounded-lg{border-radius:12px} .rounded-xl{border-radius:14px} .rounded-2xl{border-radius:18px}
/* typography */
.text-xs{font-size:12px} .text-sm{font-size:13px} .text-lg{font-size:18px} .text-xl{font-size:20px} .text-2xl{font-size:24px}
.font-bold{font-weight:700} .font-medium{font-weight:600}
/* misc */
.shadow{box-shadow:var(--shadow)}
.button-like{cursor:pointer; display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  padding:10px 12px; background:#0e1726; border:1px solid #243043; color:#e2e8f0}
.button-like:hover{background:#131f32}