/* =============================================================================
   VietTennis — theme.css  (light "Vital" design system)
   -----------------------------------------------------------------------------
   Single source of truth for design tokens + reusable visual component classes.
   Authored from design/DESIGN-VietTennis.md §2–§13 (the canonical token spec the
   new-design/style-a reference implementation also derives from).

   Screen layers must consume ONLY the tokens + classes declared here — never
   raw hex. shell.css consumes these tokens too (no raw hex in the shell layer).
   ============================================================================= */

/* ---- Fonts (display = League Spartan, body/UI = Roboto) -------------------- */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
  /* --- Core (light) --- */
  --page:        #e7ebe6;  /* behind the device / app shell */
  --screen:      #f4f7f2;  /* screen background (warm off-white) */
  --card:        #ffffff;  /* cards, sheets, inputs */
  --ink:         #1a2e26;  /* primary text / headings */
  --ink2:        #566860;  /* secondary text */
  --ink3:        #94a09a;  /* muted text, placeholders */
  --line:        #e4eae2;  /* borders, dividers */

  /* --- Brand green (primary / structural) --- */
  --green:       #2F4F46;
  --green2:      #466B5A;
  --green-soft:  #e6efe9;
  --green-deep:  #1a2e26;

  /* --- Brand gold (energy / highlight) --- */
  --gold:        #E3DD60;
  --gold-press:  #c9c454;
  --gold-soft:   rgba(227, 221, 96, .22);
  --on-gold:     #1a2e26;

  /* --- Semantic (soft, brand-tuned) --- */
  --success:        #5e9e62;
  --success-soft:   #e4f0e4;
  --warning:        #d98b2b;
  --warning-soft:   #fbeedd;
  --error:          #d9534f;
  --error-soft:     #fbe7e6;
  --info:           #4f8fd0;
  --info-soft:      #e6eff7;

  /* --- Sport accent (highlight only; greens/layout/type invariant) --- */
  --gold-accent:      #E3DD60;  /* Pickleball (default highlight)         */
  --gold-accent-soft: rgba(227, 221, 96, .22);
  --clay:             #C2410C;  /* Tennis highlight variant               */
  --clay-soft:        rgba(194, 65, 12, .14);
  /* The live accent — shell.css re-points these per data-sport. */
  --accent:      var(--gold-accent);
  --accent-soft: var(--gold-accent-soft);
  --on-accent:   var(--on-gold);

  /* --- Typography --- */
  --disp: 'League Spartan', 'Roboto', system-ui, sans-serif; /* display / numbers / buttons */
  --ui:   'Roboto', system-ui, -apple-system, sans-serif;    /* body / UI */

  /* --- Radius --- */
  --r-input:  14px;
  --r-card:   20px;
  --r-hero:   26px;
  --r-sheet:  24px;
  --r-pill:   999px;

  /* --- Elevation / shadows --- */
  --sh-sm: 0 4px 14px rgba(26, 46, 38, .06);
  --sh-md: 0 10px 30px rgba(26, 46, 38, .08);

  /* --- Spacing scale (4px base) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;
}

/* =============================================================================
   2. BASE
   ============================================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--screen);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--disp); color: var(--ink); margin: 0 0 var(--s2); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p  { margin: 0 0 var(--s3); color: var(--ink2); }
a  { color: var(--green); text-decoration: none; }

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* =============================================================================
   3. LAYOUT HELPERS
   ============================================================================= */
.sec      { padding: 0 var(--s4); margin-bottom: var(--s5); }
.sec > h2 { margin: 0 0 var(--s3); }

.row      { display: flex; align-items: center; gap: var(--s3); }
.between  { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wrap     { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* =============================================================================
   4. CARDS & CONTAINERS
   ============================================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: var(--s3); }

.hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-hero);
  padding: 22px;
  text-align: center;
  box-shadow: var(--sh-md);
}

/* =============================================================================
   5. DATA DISPLAY (player-first)
   ============================================================================= */
/* Score ring: track green-soft, progress gradient green->gold, value in center */
.ring {
  position: relative;
  width: 168px; height: 168px;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(from -90deg, var(--green) 0deg, var(--gold) var(--ring-deg, 252deg), var(--green-soft) var(--ring-deg, 252deg) 360deg);
}
.ring::before {
  content: ''; position: absolute; inset: 14px;
  background: var(--card); border-radius: 50%;
}
.ring .val {
  position: relative;
  font-family: var(--disp); font-weight: 800; font-size: 52px;
  color: var(--ink); line-height: 1;
}
.ring .val small { display: block; font-size: 12px; font-weight: 500; color: var(--ink3); font-family: var(--ui); }

.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--green-soft); color: var(--green);
}
.delta.up   { background: var(--success-soft); color: var(--success); }
.delta.down { background: var(--error-soft);   color: var(--error); }

/* Week / trend bars */
.week { display: flex; align-items: flex-end; gap: var(--s2); height: 96px; }
.day  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.day > span { font-size: 11px; color: var(--ink3); font-family: var(--ui); }
.bar {
  width: 100%; border-radius: 8px; min-height: 8px;
  background: var(--green-soft);
}
.bar.on   { background: var(--green2); }
.bar.peak { background: var(--accent); }

/* KPI tiles (2-col grid) */
.kpis { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--s3); align-items: stretch; }
.kpi  {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s4);
}
.kpi .num   { font-family: var(--disp); font-weight: 700; font-size: 28px; color: var(--ink); }
.kpi .label { font-family: var(--ui); font-size: 13px; color: var(--ink2); margin-top: 2px; }

/* Progress-to-next-band bar */
.band    { height: 8px; border-radius: var(--r-pill); background: var(--green-soft); overflow: hidden; }
.bandbar { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold), var(--green)); }

/* Coaching nudge */
.nudge {
  display: flex; gap: var(--s3); align-items: center;
  background: var(--green-soft); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s4);
}

/* Up-next card */
.next { display: flex; gap: var(--s3); align-items: center; }
.when {
  font-family: var(--disp); font-weight: 700; font-size: 13px;
  color: var(--green); background: var(--green-soft);
  padding: 4px 10px; border-radius: var(--r-pill);
}

/* =============================================================================
   6. CONTROLS — Buttons
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--disp); font-weight: 700; font-size: 16px;
  height: 52px; padding: 0 var(--s5);
  border-radius: var(--r-input); border: 1.5px solid transparent;
  cursor: pointer; user-select: none; transition: opacity .2s ease;
  background: transparent; color: var(--ink);
}
.btn.md   { height: 44px; }
.btn.block{ width: 100%; }
.btn:active   { opacity: .85; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

.btn-primary { background: var(--green);      color: #fff; }
.btn-gold    { background: var(--gold);       color: var(--on-gold); }
.btn-gold:active { background: var(--gold-press); opacity: 1; }
.btn-outline { background: transparent; border-color: var(--green); color: var(--green); }
.btn-ghost   { background: var(--green-soft);  color: var(--green); }
.btn-soft    { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-danger  { background: var(--error-soft); border-color: var(--error); color: var(--error); }

/* =============================================================================
   7. CONTROLS — Forms & inputs
   ============================================================================= */
.field { margin-bottom: var(--s4); }
.label {
  display: block; font-family: var(--ui); font-weight: 500; font-size: 13px;
  color: var(--ink2); margin-bottom: 6px;
}
.label .req { color: var(--error); }
.input {
  width: 100%; min-height: 52px; padding: 0 var(--s4);
  font-family: var(--ui); font-size: 15px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-input); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--ink3); }
.input.focus, .input:focus { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.input.invalid { border-color: var(--error); box-shadow: 0 0 0 4px var(--error-soft); }
.err { display: block; font-family: var(--ui); font-size: 12px; color: var(--error); margin-top: 6px; }

/* =============================================================================
   8. CONTROLS — Chips, Segmented tabs, Badges
   ============================================================================= */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip  {
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
  cursor: pointer; user-select: none;
}
.chip.on { background: var(--green-soft); border-color: var(--green-soft); color: var(--green); }

.segs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--green-soft); border-radius: var(--r-pill);
}
.seg {
  flex: 1; text-align: center;
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--ink2); cursor: pointer; user-select: none;
}
.seg.on { background: var(--card); color: var(--green); box-shadow: var(--sh-sm); }

.tabpanel { display: none; }
.tabpanel.on { display: block; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--green-soft); color: var(--green);
}
.b-green   { background: var(--green-soft);   color: var(--green); }
.b-gold    { background: var(--gold-soft);    color: var(--on-gold); }
.b-success { background: var(--success-soft); color: var(--success); }
.b-warning { background: var(--warning-soft); color: var(--warning); }
.b-error   { background: var(--error-soft);   color: var(--error); }
.b-info    { background: var(--info-soft);    color: var(--info); }

/* =============================================================================
   9. LISTS / ROWS
   ============================================================================= */
.li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  cursor: pointer; color: var(--ink);
}
.li:last-child { border-bottom: 0; }
.li .body  { flex: 1; min-width: 0; }
.li .title { font-family: var(--ui); font-weight: 500; color: var(--ink); }
.li .sub   { font-family: var(--ui); font-size: 13px; color: var(--ink3); }
.li .val   { font-family: var(--disp); font-weight: 700; color: var(--ink); }
.thumb {
  width: 48px; height: 48px; flex: none;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green);
}
.thumb.gold { background: var(--gold-soft); color: var(--on-gold); }

/* =============================================================================
   10. CHILD HEADER (used by shell child chrome; tokenized here)
   ============================================================================= */
.navbar {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 52px; padding: 0 var(--s4);
}
.navbar .title { font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--ink); }

/* =============================================================================
   11. SHELL-LAYER TOKENS
   (consumed by shell.css so the shell never needs a raw hex)
   ============================================================================= */
:root {
  --bezel:        #11221c;                  /* device frame / phone bezel */
  --bezel-radius: 46px;                     /* outer device corner radius */
  --screen-radius:38px;                     /* inner viewport corner radius */
  --device-w:     390px;                    /* iPhone-class viewport width */
  --device-h:     844px;                    /* iPhone-class viewport height */
  --scrim:        rgba(26, 46, 38, .38);    /* popover / sheet backdrop */
  --home-ind:     rgba(26, 46, 38, .85);    /* home indicator pill */
  --nav-h:        72px;                      /* bottom nav height */
  --topbar-h:     56px;                      /* top bar height */
  --fab-size:     58px;                      /* center gold FAB diameter */
}

/* =============================================================================
   14. SELECTABLE COLOR THEMES
   -----------------------------------------------------------------------------
   The prototype ships 5 brand palettes so the product owner can compare looks.
   Neutrals (page/screen/card/ink/line) and semantic colors stay constant — only
   the BRAND green family and the ACCENT (gold) family change, so contrast and
   legibility are preserved across every theme. The choice is stored in
   localStorage ("vt-theme") and applied by shell.js as <html data-theme="…">.
   `:root[data-theme]` outranks the base `:root`, so these override the defaults.
   ============================================================================= */

/* 1 · Forest (default) — deep forest green + tennis gold */
[data-theme="forest"] {
  --green: #2F4F46; --green2: #466B5A; --green-soft: #e6efe9; --green-deep: #1a2e26;
  --gold: #E3DD60; --gold-press: #c9c454; --gold-soft: rgba(227,221,96,.22); --on-gold: #1a2e26;
  --gold-accent: #E3DD60; --gold-accent-soft: rgba(227,221,96,.22);
}

/* 2 · Jade — bright jade green + lime (viettennis #257b60 + #c2d552) */
[data-theme="jade"] {
  --green: #257b60; --green2: #2f9576; --green-soft: #e3f1ec; --green-deep: #15493a;
  --gold: #c2d552; --gold-press: #a9bf3f; --gold-soft: rgba(194,213,82,.24); --on-gold: #1a2e26;
  --gold-accent: #c2d552; --gold-accent-soft: rgba(194,213,82,.24);
}

/* 3 · Sunny — deep green + bright tennis-ball yellow (#ebe74e) */
[data-theme="sunny"] {
  --green: #1f6b54; --green2: #2a8067; --green-soft: #e4f0ea; --green-deep: #143f33;
  --gold: #ebe74e; --gold-press: #d4cf3a; --gold-soft: rgba(235,231,78,.26); --on-gold: #1a2e26;
  --gold-accent: #ebe74e; --gold-accent-soft: rgba(235,231,78,.26);
}

/* 4 · Ocean — calm teal + warm amber (cool, low-glare) */
[data-theme="ocean"] {
  --green: #15616d; --green2: #1d7f8e; --green-soft: #e1eff1; --green-deep: #0e4049;
  --gold: #f4c152; --gold-press: #e0ad3c; --gold-soft: rgba(244,193,82,.24); --on-gold: #1a2e26;
  --gold-accent: #f4c152; --gold-accent-soft: rgba(244,193,82,.24);
}

/* 5 · Slate — modern neutral slate + lime (understated, professional) */
[data-theme="slate"] {
  --green: #3b4a59; --green2: #54677a; --green-soft: #eceff3; --green-deep: #27313b;
  --gold: #c2d552; --gold-press: #a9bf3f; --gold-soft: rgba(194,213,82,.24); --on-gold: #1a2e26;
  --gold-accent: #c2d552; --gold-accent-soft: rgba(194,213,82,.24);
}