/* ==========================================================================
   SCORECERY — BRAND (v2, merged)
   All colour tokens, gradients and component colour rules used by both
   landing (index) and fixtures/results/admin pages.
   ========================================================================== */

:root{
  /* Core palette */
  --bg:       #0B0C10;
  --panel:    #11131A;
  --panel-2:  #151826;
  --ink:      #E6E8EC;
  --muted:    #A0A6B1;
  --line:     #212633;

  /* Brand pair */
  --brand:    #6D5EF5;      /* electric-violet */
  --brand-ink:#0D0E14;
  --accent:   #29F5C3;      /* mint */

  /* Status */
  --danger:   #EF4444;
  --warning:  #F59E0B;
  --success:  #22C55E;

  /* Radii / shadows / container */
  --radius:   16px;
  --radius-sm:10px;
  --shadow:   0 10px 30px rgba(0,0,0,.35);
  --shadow-raise: 0 10px 28px rgba(0,0,0,.35);
  --shadow-glow:  0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);

  --container: clamp(960px, 90vw, 1200px);
  --pad: 16px;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Focus ring + link */
  --brand-ring: color-mix(in oklab, var(--brand) 55%, transparent);
  --link:  color-mix(in oklab, var(--brand) 80%, white 20%);

  /* Themed areas (landing) */
  --nav-bg:   linear-gradient(to bottom, rgba(7,9,14,.70), rgba(7,9,14,.55));
  --hero-bg:  radial-gradient(80% 60% at 20% 0%, rgba(109,94,245,.12), transparent 60%),
              radial-gradient(70% 50% at 100% 20%, rgba(41,245,195,.08), transparent 55%),
              var(--bg);
  --foot-bg:  var(--panel);

  /* Cards */
  --card-bg: var(--panel);
  --card-bd: var(--line);
  --card-fg: var(--ink);

  /* Chips (public scoreboard) */
  --chip-bg: #0F1524;
  --chip-bd: #1E2A46;
  --chip-fg: #FFFFFF;

  /* Buttons (landing + admin) */
  --btn-bg:    var(--brand);
  --btn-fg:    var(--brand-ink);
  --btn-bd:    color-mix(in oklab, var(--brand) 55%, black 45%);
  --btn-hover: color-mix(in oklab, var(--brand) 80%, white 20%);
  --btn-muted-bg: var(--panel-2);
  --btn-muted-fg: var(--ink);
  --btn-muted-bd: var(--line);

  /* Inputs / tables */
  --input-bg:  #0E1118;
  --input-fg:  var(--ink);
  --input-bd:  #1B2230;
  --input-ph:  #798196;
  --input-focus: var(--brand-ring);

  --table-head-bg:   #0F131D;
  --table-row-alt:   #0E121A;
  --table-row-hover: #141A26;

  /* Charts */
  --chart-1:#6D5EF5; --chart-2:#29F5C3; --chart-3:#F59E0B;
  --chart-4:#22C55E; --chart-5:#38BDF8; --chart-6:#EF4444;

  /* Sports / categories (fixtures/results) */
  --cat-men:    #60A5FA;
  --cat-women:  #F472B6;
  --cat-youth:  #34D399;
  --cat-masters:#F59E0B;
  --cat-mixed:  #A78BFA;

  /* Team fallbacks */
  --team-home:  var(--brand);
  --team-away:  var(--accent);

  /* Legacy aliases */
  --panel-bg: var(--panel);
  --panel-ink: var(--ink);
  --border:    var(--line);

  /* Motion */
  --ease:     cubic-bezier(.2,.65,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;

  /* NEW: surface-2 used in badges/scorebands */
  --surface-2: color-mix(in oklab, var(--panel) 82%, black 18%);
}

/* -------- Light mode -------- */
@media (prefers-color-scheme: light){
  :root{
    --bg:#F6F7FB; --panel:#FFFFFF; --panel-2:#F3F5F9;
    --ink:#10131A; --muted:#5A6473; --line:#DDE2EB;

    --shadow:       0 8px 24px rgba(10,16,31,.08);
    --shadow-raise: 0 10px 28px rgba(10,16,31,.10);
    --shadow-glow:  0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);

    --nav-bg:   linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.86));
    --hero-bg:  linear-gradient(180deg, rgba(109,94,245,.06), transparent 55%), var(--bg);
    --foot-bg:  var(--panel);

    --input-bg:#FFFFFF; --input-fg:#0B1020; --input-bd:#C9D3E3;
    --table-head-bg:#EEF3FB; --table-row-alt:#FAFBFE; --table-row-hover:#F2F6FD;

    --surface-2: var(--panel-2);
  }
}

/* -------- High-contrast tweaks -------- */
@media (prefers-contrast: more){
  :root{
    --line:       color-mix(in oklab, var(--ink) 24%, transparent);
    --brand-ring: color-mix(in oklab, var(--brand) 55%, transparent);
  }
}

/* -------- Desaturated accent for large screens (optional) -------- */
@media screen and (min-width: 800px){
  :root{ --accent: color-mix(in oklab, #29F5C3 75%, white 25%); }
}

/* ---------- Brand mark visual ---------- */
.brand__mark{
  background:
    radial-gradient(12px 12px at 70% 30%, color-mix(in oklab, var(--accent) 85%, transparent), transparent 60%),
    linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 75%, black));
}

/* ---------- Buttons (colour layer) ---------- */
.btn{
  box-shadow: 0 6px 16px color-mix(in oklab, var(--brand) 22%, transparent);
  background: linear-gradient(135deg, var(--btn-bg), color-mix(in oklab, var(--btn-bg) 70%, black 30%));
  color: var(--btn-fg);
}
.btn.mint{
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, black 30%));
  color:#041612;
  box-shadow:0 8px 18px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* ---------- Chips / Badges / Venue chips (colour layer) ---------- */
.badge, .chip{ border-color: var(--line); background: var(--surface-2); color: var(--ink); }

.badge[data-cat="men"]    { background: color-mix(in oklab, var(--cat-men) 18%, transparent);    border-color: color-mix(in oklab, var(--cat-men) 55%, transparent);    color: var(--cat-men); }
.badge[data-cat="women"]  { background: color-mix(in oklab, var(--cat-women) 18%, transparent);  border-color: color-mix(in oklab, var(--cat-women) 55%, transparent);  color: var(--cat-women); }
.badge[data-cat="youth"]  { background: color-mix(in oklab, var(--cat-youth) 18%, transparent);  border-color: color-mix(in oklab, var(--cat-youth) 55%, transparent);  color: var(--cat-youth); }
.badge[data-cat="masters"]{ background: color-mix(in oklab, var(--cat-masters) 18%, transparent);border-color: color-mix(in oklab, var(--cat-masters) 55%, transparent);color: var(--cat-masters); }
.badge[data-cat="mixed"]  { background: color-mix(in oklab, var(--cat-mixed) 18%, transparent);  border-color: color-mix(in oklab, var(--cat-mixed) 55%, transparent);  color: var(--cat-mixed); }

.venue-chip{
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  color: color-mix(in oklab, var(--accent) 85%, white 15%);
}

/* ---------- Public scoreboard chip variants (landing) ---------- */
.chip--live   { border-color: var(--danger); color: var(--danger); }
.chip--tv     { border-style: dashed; color: var(--accent); }
.chip--league { border-color: var(--brand);  color: var(--brand); }

/* ---------- Scoreband cells (fixtures/results) ---------- */
.scoreband .cell{ background: var(--surface-2); border:1px solid var(--line); color: var(--ink); }
.scoreband .cell.mine--good{    background: color-mix(in oklab, var(--success) 16%, transparent); border-color: color-mix(in oklab, var(--success) 45%, transparent); color: var(--success); }
.scoreband .cell.mine--warn{    background: color-mix(in oklab, var(--warning) 16%, transparent); border-color: color-mix(in oklab, var(--warning) 45%, transparent); color: var(--warning); }
.scoreband .cell.mine--bad{     background: color-mix(in oklab, var(--danger) 16%, transparent);  border-color: color-mix(in oklab, var(--danger) 45%, transparent);  color: var(--danger); }

/* ---------- Tables (alt rows / hover) ---------- */
.table tr:nth-child(even){ background: var(--table-row-alt); }
.table tr:hover{ background: var(--table-row-hover); }

/* ---------- Inputs ---------- */
.input, .select{
  background: var(--input-bg); color: var(--input-fg); border-color: var(--input-bd);
}
.input::placeholder{ color: var(--input-ph); }
.input:focus, .select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

/* ---------- Links ---------- */
a.link{ color: var(--link); text-decoration:none; font-weight:600 }
a.link:hover{ text-decoration:underline }