/* ============================================================
   statU — Design System
   Light-first · warm off-white · teal/cyan/orange · Poppins
   "Hudl × Canva for grassroots youth football"
   ============================================================ */

:root{
  /* —— brand palette (from logo) —— */
  --ink:    #16292b;   /* primary text / dark hero surfaces */
  --ink-2:  #21383b;
  --ink-3:  #2f4a4d;
  --paper:  #f4f1e9;   /* app background (warm off-white) */
  --paper-2:#ece7da;
  --card:   #ffffff;
  --teal:   #199987;   /* primary action / brand */
  --teal-d: #137567;
  --teal-l: #2bb7a2;
  --mint:   #84e0cb;   /* soft fills / success */
  --mint-l: #b6ecdf;
  --mint-d: #4fb8a3;
  --cyan:   #14cce4;   /* bright accent / highlight */
  --cyan-d: #0fa6ba;
  --orange: #fa8123;   /* energy / reward / GOAT */
  --orange-d:#e06a10;
  --olive:  #acac70;
  --gold:   #e8b53d;   /* awards */

  /* —— semantic —— */
  --text:    var(--ink);
  --text-2:  #5c6e6f;     /* muted */
  --text-3:  #8a9a99;     /* faint */
  --line:    #e4ddcf;     /* hairlines on paper */
  --line-2:  #eee9dd;
  --good:    #1faa6e;
  --warn:    #f0a52b;
  --bad:     #e2583e;

  /* —— radius —— */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* —— shadow —— */
  --sh-sm: 0 1px 2px rgba(22,41,43,.06), 0 1px 3px rgba(22,41,43,.05);
  --sh-md: 0 4px 12px rgba(22,41,43,.07), 0 2px 4px rgba(22,41,43,.05);
  --sh-lg: 0 14px 40px rgba(22,41,43,.12), 0 4px 10px rgba(22,41,43,.06);
  --sh-xl: 0 30px 80px rgba(22,41,43,.20);
  --sh-teal: 0 12px 30px rgba(25,153,135,.30);
  --sh-orange: 0 12px 30px rgba(250,129,35,.32);

  /* —— layout —— */
  --nav-w: 252px;
  --top-h: 70px;
  --maxw: 1280px;

  --font: 'Poppins', system-ui, sans-serif;
}

/* ===== reset ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--mint); color:var(--ink); }

/* ===== typography ===== */
.display{ font-weight:800; font-size:48px; line-height:1.02; letter-spacing:-.03em; }
.h1{ font-weight:800; font-size:32px; line-height:1.05; letter-spacing:-.025em; }
.h2{ font-weight:700; font-size:23px; line-height:1.1; letter-spacing:-.02em; }
.h3{ font-weight:700; font-size:17px; line-height:1.2; letter-spacing:-.01em; }
.body{ font-weight:400; font-size:15px; line-height:1.5; }
.small{ font-weight:500; font-size:13px; line-height:1.4; }
.eyebrow{ font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.muted{ color:var(--text-2); }
.faint{ color:var(--text-3); }

/* ===== progressive gauge motif (the brand signature) ===== */
.gauge{ display:flex; gap:5px; align-items:center; }
.gauge > i{ height:7px; border-radius:7px; flex:1; display:block; }
.gauge > i:nth-child(1){ background:var(--orange); }
.gauge > i:nth-child(2){ background:var(--olive); }
.gauge > i:nth-child(3){ background:var(--mint); }
.gauge > i:nth-child(4){ background:var(--teal); }
.gauge > i:nth-child(5){ background:var(--cyan); }
.gauge.sm > i{ height:5px; }
.gauge.lg > i{ height:10px; }

/* a thin gauge underline used under headings */
.gauge-rule{ height:5px; width:64px; border-radius:5px;
  background:linear-gradient(90deg,var(--orange) 0 18%, var(--olive) 18% 40%, var(--mint) 40% 60%, var(--teal) 60% 80%, var(--cyan) 80% 100%); }

/* ===== buttons ===== */
.btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  padding:12px 20px; border-radius:var(--r-pill); transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:var(--sh-teal); }
.btn-primary:hover{ background:var(--teal-d); }
.btn-accent{ background:var(--orange); color:#fff; box-shadow:var(--sh-orange); }
.btn-accent:hover{ background:var(--orange-d); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-2); }
.btn-ghost{ background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ background:#fff; box-shadow:var(--sh-md); }
.btn-outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-outline:hover{ box-shadow:inset 0 0 0 1.5px var(--teal); color:var(--teal-d); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn-lg{ padding:15px 26px; font-size:16px; }
.btn-icon{ width:42px; height:42px; padding:0; border-radius:var(--r-pill); }

/* ===== chips / pills ===== */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill);
  font-weight:600; font-size:12.5px; background:var(--paper-2); color:var(--text-2); }
.chip.teal{ background:rgba(25,153,135,.12); color:var(--teal-d); }
.chip.cyan{ background:rgba(20,204,228,.14); color:var(--cyan-d); }
.chip.orange{ background:rgba(250,129,35,.14); color:var(--orange-d); }
.chip.mint{ background:var(--mint-l); color:var(--teal-d); }
.chip.dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ===== cards ===== */
.card{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-md); }
.card-pad{ padding:22px; }
.card-hover{ transition:transform .16s ease, box-shadow .2s ease; }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.dark-surface{ background:var(--ink); color:#fff; border-radius:var(--r-lg); }
.dark-surface .muted{ color:#9fb3b2; }

/* ===== form controls ===== */
.field{ display:block; width:100%; padding:13px 15px; border-radius:var(--r-sm);
  background:var(--card); border:1.5px solid var(--line); font-size:15px; color:var(--ink);
  transition:border .15s ease, box-shadow .15s ease; }
.field:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(25,153,135,.12); }
.field::placeholder{ color:var(--text-3); }
.label{ display:block; font-weight:600; font-size:13px; margin-bottom:7px; color:var(--text-2); }

/* segmented control */
.seg{ display:inline-flex; background:var(--paper-2); border-radius:var(--r-pill); padding:4px; gap:2px; }
.seg button{ padding:8px 16px; border-radius:var(--r-pill); font-weight:600; font-size:13.5px; color:var(--text-2); transition:.15s; }
.seg button.on{ background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); }

/* ===== avatar ===== */
.avatar{ border-radius:50%; background:var(--paper-2); display:grid; place-items:center; overflow:hidden;
  font-weight:700; color:var(--teal-d); flex:none; position:relative; }
.avatar.ring{ box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--mint); }

/* number badge (jersey) */
.jersey{ font-weight:800; font-variant-numeric:tabular-nums; }

/* ===== scrollbars ===== */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(22,41,43,.16); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ===== utility ===== */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; }
.center{ align-items:center; justify-content:center; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }
.gap4{ gap:4px;} .gap6{ gap:6px;} .gap8{ gap:8px;} .gap10{ gap:10px;} .gap12{ gap:12px;}
.gap16{ gap:16px;} .gap20{ gap:20px;} .gap24{ gap:24px;} .gap32{ gap:32px;}
.mt4{margin-top:4px;} .mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;}
.clip-corner{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* ===== sidebar nav ===== */
.nav-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
  color:var(--text-2); background:transparent; font-weight:600; font-size:14.5px; transition:.14s; text-align:left; width:100%; }
.nav-item:hover{ background:var(--paper-2); }
.nav-item.on{ color:#fff; background:var(--teal); box-shadow:var(--sh-teal); }
.nav-item.on:hover{ background:var(--teal); }

/* ===== topbar pickers (team / season) ===== */
.picker-btn{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:12px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:.14s; flex:none; }
.picker-btn:hover{ box-shadow:inset 0 0 0 1px var(--line-2); background:var(--paper-2); }
.picker-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:230px; z-index:60;
  background:var(--card); border-radius:14px; box-shadow:var(--sh-lg); border:1px solid var(--line);
  padding:6px; display:flex; flex-direction:column; gap:1px; }
.picker-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:9px; cursor:pointer; background:none; transition:.12s; width:100%; text-align:left; color:var(--ink); }
.picker-item:hover{ background:var(--paper); }

/* ===== section tab bar (sub-navigation under the topbar) ===== */
.tabbar{ display:flex; gap:4px; align-items:center; padding:0 32px; height:54px;
  position:sticky; top:var(--top-h); z-index:18; flex-wrap:wrap;
  background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.tabbar button{ position:relative; padding:9px 15px; border-radius:10px; font-weight:650; font-size:14px;
  color:var(--text-2); background:transparent; transition:.14s; display:inline-flex; align-items:center; gap:8px; }
.tabbar button:hover{ background:var(--paper-2); color:var(--ink); }
.tabbar button.on{ color:var(--teal-d); background:color-mix(in srgb, var(--teal) 11%, transparent); }
.tabbar button svg{ width:17px; height:17px; }

/* ===== nested segmented control (within a tab) ===== */
.subseg{ display:inline-flex; gap:2px; background:var(--paper-2); border-radius:var(--r-pill); padding:4px; }
.subseg button{ padding:8px 16px; border-radius:var(--r-pill); font-weight:650; font-size:13.5px; color:var(--text-2); transition:.14s; display:inline-flex; align-items:center; gap:7px; }
.subseg button.on{ background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); }
.subseg button svg{ width:16px; height:16px; }
@keyframes fadeUp{ from{ transform:translateY(9px);} to{ transform:none;} }
.fade-up{ animation:fadeUp .4s ease both; }