/* ==========================================================================
   FLASH SPORTS — SAGE THEME
   Loaded on top of styles.css by sage.html. Palette: deep forest green,
   pale sage-yellow and warm cream. Colours only; layout and type are shared
   with the other versions.
   ========================================================================== */
:root {
  --ink: #243B30;
  --ink-2: #304B3D;
  --ink-3: #3E5B48;
  --ball: #DEDBA6;          /* accent fill (base styles use --ball everywhere) */
  --ball-d: #CFCD95;
  --clay: #526541;          /* accent TEXT on light backgrounds */
  --sage: #71825D;
  --paper: #EEEEE3;
  --white: #F8F7F0;
  --text: #283D31;
  --muted: #647063;
  --line: #D8DBCE;
  --shadow: 0 18px 40px -24px rgba(36, 59, 48, .45);
}

/* ---------- Header ---------- */
.site-header { background: rgba(36, 59, 48, .96); border-bottom-color: rgba(222, 219, 166, .12); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(800px 480px at 88% 10%, rgba(113, 130, 93, .45) 0%, transparent 62%),
    linear-gradient(160deg, #1D3027 0%, var(--ink) 45%, var(--ink-2) 100%);
}
.hero-bg { opacity: .13; }
.eyebrow { background: rgba(222, 219, 166, .08); border-color: rgba(222, 219, 166, .24); }
.dot { box-shadow: 0 0 0 4px rgba(222, 219, 166, .25); animation: spulse 2s infinite; }
@keyframes spulse { 50% { box-shadow: 0 0 0 8px rgba(222, 219, 166, 0); } }
.ball-shadow { background: rgba(0, 0, 0, .35); }
.next-card { background: var(--white); }
.hero-stats { border-top-color: rgba(222, 219, 166, .2); }
.ticker { background: var(--ball); }

/* ---------- Buttons ---------- */
.btn-ball { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .5); }
.btn-ball:hover { background: #E9E6BC; }
.btn-ghost { border-color: rgba(222, 219, 166, .45); }
.btn-ghost:hover { border-color: var(--ball); color: var(--ball); }
.btn-line-light { border-color: rgba(222, 219, 166, .4); }
.btn-ink:hover { background: var(--ink-3); }

/* ---------- Text accents ---------- */
.link-arrow { border-bottom-color: var(--sage); }
.err { color: #B0432B; }
.booker-side .err { color: #F2A58F; }
:focus-visible { outline-color: var(--clay); }
.hero :focus-visible, .site-header :focus-visible, .section-dark :focus-visible,
.booker-side :focus-visible, .site-footer :focus-visible, .past :focus-visible { outline-color: var(--ball); }
.skip { background: var(--ball); color: var(--ink); }

/* ---------- Cream surfaces (base uses pure white) ---------- */
.date, .court, .slot, .seg, .coach, .t-card, dialog,
.field input, .field select, .field textarea, .coach-pick select { background: var(--white); }
.seg { box-shadow: inset 0 0 0 1px var(--line); }
.t-card, .coach { border-color: var(--line); }
.booker-side .field input, .booker-side .field textarea { background: var(--white); }

/* ---------- Light sections ---------- */
.feature-grid .ico { background: var(--ink); color: var(--ball); }
.avatar { background: var(--ink); color: var(--ball); }
.coach .role { color: var(--clay); }
.coach.is-lead { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); }
.coach.is-lead .avatar { background: var(--ball); color: var(--ink); }
.coach.is-lead .role { color: var(--ball); }
.contact-list a:hover { background: var(--ball); }

/* ---------- Dark sections ---------- */
.section-dark { background: var(--ink); }
.card-dark { background: var(--ink-2); border-color: rgba(222, 219, 166, .12); }
.card-dark:hover { border-color: var(--ball); }
.card-dark .num { -webkit-text-stroke-color: rgba(222, 219, 166, .5); }
.chip { background: rgba(222, 219, 166, .14); }
.sessions { background: rgba(222, 219, 166, .07); }
.tier { background: var(--ink-2); border-color: rgba(222, 219, 166, .14); }
.tier-hot { background: linear-gradient(170deg, var(--ink-3), var(--ink-2)); border-color: var(--ball); }

/* ---------- Booking ---------- */
.date:hover, .court:hover, .slot:hover:not([disabled]) { border-color: var(--clay); }
.slot[aria-pressed="true"] { background: var(--clay); border-color: var(--ink); color: #fff; }
.k-sel { background: var(--clay); }
.slot.mine { background: #DCE3CE; border-color: #B3C29B; }
.k-mine { background: #DCE3CE; }
.slot[disabled] { background: transparent; }

/* ---------- Tournaments ---------- */
.t-card::before { background: linear-gradient(90deg, var(--clay), var(--sage)); }
.t-ed { color: var(--clay); }
.t-status { background: #E7E4B8; color: #5A5424; }
.t-tags span { background: var(--paper); }
.t-card .btn-ink:hover { color: var(--ball); }
.past { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); }
.past::after { -webkit-text-stroke-color: rgba(222, 219, 166, .14); }

/* ---------- Dialog, footer ---------- */
dialog::backdrop { background: rgba(29, 48, 39, .75); }
.dlg-close button { background: var(--paper); }
.dlg-close button:hover { background: var(--ball); }
.check input { accent-color: var(--clay); }
.field input:focus, .field select:focus, .field textarea:focus, .coach-pick select:focus { border-color: var(--clay); }
.site-footer { background: var(--ink); }
.foot-links a:hover { color: var(--ink); }