/* ============================================================
   BASE.CSS — Thirsk Squash Club
   Colour variables, typography, resets
   Change the theme here and it updates everywhere
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/* ── THEME VARIABLES ───────────────────────────────────────── */
:root {
  /* Primary palette — change these to switch theme
     Team-kit rebrand 2026-04-21: black + emerald (Finden+Hales kit).
     Punched for contrast: vivid kit-emerald, deep rich black, punchy gold. */
  --bd: #05080a;       /* rich black — header, hero bg */
  --bm: #00d084;       /* vivid kit emerald — primary buttons, links */
  --bm2: #059669;      /* deep emerald — secondary buttons, hovers */
  --bml: #34d399;      /* bright mint — glows, progress tips, pulses */
  --bl: #d9f5e7;       /* pale mint — card backgrounds, tags */
  --ac: #fbbf24;       /* punchy gold — anniversary highlights, heritage */
  --gm: #d4af37;       /* metallic gold — soft accent, scattered moments */
  --gml: #f0d878;      /* pale metallic gold — soft backgrounds, borders on light */
  --gmd: #9a7a1f;      /* deep metallic gold — text on light surfaces */

  /* Neutral palette */
  --mu: #5b6470;       /* neutral grey text */
  --br: #d9dee1;       /* soft neutral — border colour */
  --wh: #ffffff;       /* white — card surfaces */
  --bg: #f6f7f9;       /* near-white — page background */

  /* Semantic colours */
  --gn: #0f7a3c;       /* green — success, wins, promotions */
  --gl: #d4f5e2;       /* green light — success backgrounds */
  --rd: #d42b2b;       /* red — errors, losses, disputes */
  --rl: #ffe8e8;       /* red light — error backgrounds */
  --am: #b8860b;       /* amber text — warnings, pending */
  --al: #fff8e1;       /* amber light — warning backgrounds */
  --wa:  #25d366;      /* whatsapp green — primary / mini-league group */
  --wab: #128c7e;      /* whatsapp teal — general group */
  --wac: #075e54;      /* whatsapp dark — club-night group / emphasis */

  /* On-dark accents (used in header, hamburger, anniversary footer) */
  --lav:  #b8c5bf;     /* soft cool grey on dark */
  --lavl: #d0d8d4;     /* lighter cool grey on dark */

  /* Typography */
  --font-display:   'Bebas Neue', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  /* Two-font system: kickers / quotes / heritage copy reuse DM Sans in italic.
     Kept as a variable so every editorial usage stays consistent and future
     typography changes flow through one line. */
  --font-editorial: 'DM Sans', sans-serif;

  /* Spacing scale */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

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

/* ── BASE TYPOGRAPHY ───────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: #0a0f1e;
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.2;
}

a {
  color: var(--bm);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
}

input, select, textarea {
  font-family: var(--font-body);
}

/* ── DISPLAY HEADINGS (Bebas Neue) ─────────────────────────── */
.display {
  font-family: var(--font-display);
  letter-spacing: 2px;
}

/* ── EDITORIAL (Fraunces — for heritage, quotes, section kickers) ── */
.editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
}
.editorial-label {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ── UTILITY CLASSES ───────────────────────────────────────── */
.text-muted    { color: var(--mu); }
.text-accent   { color: var(--ac); }
.text-blue     { color: var(--bm); }
.text-green    { color: var(--gn); }
.text-red      { color: var(--rd); }
.text-sm       { font-size: 12px; }
.text-xs       { font-size: 11px; }
.font-bold     { font-weight: 500; }
.hidden        { display: none !important; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.gap-sm        { gap: var(--sp-sm); }
.gap-md        { gap: var(--sp-md); }
.mt-sm         { margin-top: var(--sp-sm); }
.mt-md         { margin-top: var(--sp-md); }
.mb-md         { margin-bottom: var(--sp-md); }
.w-full        { width: 100%; }

/* ── SUCCESS / ERROR MESSAGES ──────────────────────────────── */
.msg-ok {
  background: var(--gl);
  border: 0.5px solid var(--gn);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  font-size: 13px;
  color: var(--gn);
  display: none;
  margin-top: var(--sp-md);
}

.msg-err {
  background: var(--rl);
  border: 0.5px solid var(--rd);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  font-size: 13px;
  color: var(--rd);
  display: none;
  margin-top: var(--sp-md);
}

/* ── INFO BOX ──────────────────────────────────────────────── */
.info-box {
  background: var(--bl);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 12px;
  color: var(--mu);
  line-height: 1.6;
}

/* ── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 14px;
  font-weight: 500;
}
.badge-pend  { background: var(--al); color: var(--am); }
.badge-disp  { background: var(--rl); color: var(--rd); }
.badge-conf  { background: var(--gl); color: var(--gn); }
.badge-blue  { background: var(--bl); color: var(--bm); }
.badge-warn  { background: var(--al); color: #f57f17; border: 0.5px solid #ffe082; }
.badge-full  { background: var(--gl); color: var(--gn); }
.badge-empty { background: var(--al); color: #f57f17; }
.badge-alert { background: var(--rd); color: #fff; }
.badge-muted { background: #f5f5f5; color: #999; }

/* ── TAGS ──────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 18px;
  margin-right: 4px;
  margin-bottom: 3px;
}
.tag-blue     { background: var(--bl); color: var(--bm); }
.tag-amber    { background: #fef3cd; color: #856404; }
.tag-green    { background: var(--gl); color: var(--gn); }
.tag-promote  { background: var(--gl); color: var(--gn); font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.tag-demote   { background: var(--rl); color: var(--rd); font-size: 9px; padding: 1px 5px; border-radius: 8px; }

/* ── CONTACT PILLS (used in league player cards) ──────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--font-body);
  border: none;
}
.pill-wa    { background: var(--gl); color: var(--gn); }
.pill-info  { background: var(--bl); color: var(--bm); }

/* ── SMALL ACTION BUTTONS ─────────────────────────────────── */
.btn-remove-sm {
  background: #fff0f0;
  color: var(--rd);
  border: 0.5px solid var(--rd);
  border-radius: var(--radius-sm);
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font-body);
}

/* ── CHAT BUBBLES (direct-message thread) ─────────────────── */
.chat-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
}
.chat-bubble-me    { background: var(--bd); color: #fff; margin-left: auto; }
.chat-bubble-other { background: var(--wh); border: 0.5px solid var(--br); }