/* ============================================================
   Vita 365 — 체중 기록, v2 skin

   Second of the three screens left on cream. The 플랜 screen's weight
   tile and its "기록 보기" both land here, so a member taps a v2 tile
   and arrives on the old app.

   weight-tracker.css declares two token families on :root — the --vdw-*
   base and the --wt-* series/semantics — and every rule in that file,
   plus every chart colour weight-tracker.js writes as an SVG attribute,
   reads them through var(). Re-pointing the families therefore carries
   the chart too, which a rule-by-rule restyle could not have done.
   Every rule needs an ancestor `.v2`.
   ============================================================ */

/* Declared on the app root, not on .wt-page: the record/goal modals are
   appended to <main>, outside the page container, so a bridge scoped to
   .wt-page left them on the cream values while everything behind them
   had moved. */
.v2 {
  /* Base */
  --vdw-bg:       var(--v2-bg);
  --vdw-card:     var(--v2-surface);
  --vdw-card-2:   var(--v2-surface-2);
  --vdw-border:   var(--v2-line);
  --vdw-divider:  var(--v2-line);
  --vdw-ink:      var(--v2-ink);
  --vdw-ink-2:    var(--v2-ink-2);
  --vdw-muted:    var(--v2-ink-3);
  --vdw-muted-2:  var(--v2-ink-3);

  /* Series. Weight is the brand line; BMI takes the slate that v2
     already reserves for body metrics, so the two curves stay legible
     against each other without reintroducing terracotta. */
  --wt-weight:    var(--v2-brand-btn);
  --wt-weight-2:  var(--v2-brand);
  --wt-bmi:       var(--v2-c-body);
  --wt-goal:      var(--v2-warn);
  --wt-goal-2:    var(--v2-warn);
  --wt-up:        var(--v2-bad);
  --wt-down:      var(--v2-brand);
  --wt-link:      var(--v2-brand-ink);

  /* BMI bands, matching the scale the 플랜 screen's BMI tile draws. */
  --wt-bmi-under:  var(--v2-warn);
  --wt-bmi-normal: var(--v2-brand);
  --wt-bmi-over:   var(--v2-c-move);
  --wt-bmi-obese:  var(--v2-bad);

}

.v2 .wt-page { color: var(--v2-ink); max-width: 720px; }
/* No font rule here. weight-tracker.css used to set its own blanket
   `.wt-page *` stack and this had to out-specify it; both are gone, and
   the shell forces the one family with !important. .wt-serif keeps its
   tracking — it is a size/weight hook now, not a typeface. */
.v2 .wt-page .wt-serif { letter-spacing: -0.02em; }

/* ─── Header ────────────────────────────────────────────────── */
.v2 .wt-h1 { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -0.03em; }
.v2 .wt-h1-meta, .v2 .wt-eyebrow { color: var(--v2-ink-3); }
.v2 .wt-records-link, .v2 .wt-detail-back { color: var(--v2-brand-ink); font-weight: 600; }

/* ─── Cards: hairline border → floating white ───────────────── */
.v2 .wt-card,
.v2 .wt-chart-card,
.v2 .wt-goal-card,
.v2 .wt-records-card,
.v2 .wt-detail-card,
.v2 .wt-avg-card {
  background: var(--v2-surface);
  border: none;
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card);
}
.v2 .wt-card-eyebrow { color: var(--v2-ink-3); font-weight: 700; letter-spacing: .06em; }

/* Numerals carry the v2 tracking rather than the serif's proportions. */
.v2 .wt-bignum-value,
.v2 .wt-avg-value,
.v2 .wt-detail-value,
.v2 .wt-goal-ring-pct {
  font-weight: 700; letter-spacing: var(--v2-num-tracking); color: var(--v2-ink);
}
.v2 .wt-bignum-unit, .v2 .wt-avg-label, .v2 .wt-detail-label { color: var(--v2-ink-3); }

/* ─── Controls ──────────────────────────────────────────────── */
.v2 .wt-btn {
  border: 1px solid var(--v2-line-2);
  background: var(--v2-surface);
  color: var(--v2-ink);
  border-radius: var(--v2-r-pill);
  font-weight: 600;
}
.v2 .wt-btn-primary {
  background: var(--v2-brand-btn); border-color: var(--v2-brand-btn); color: #fff;
}
.v2 .wt-chip { border: 1px solid var(--v2-line-2); background: var(--v2-surface); color: var(--v2-ink-2); }
/* Range + unit toggles — a sunken track with a white selected pill. */
.v2 .wt-seg, .v2 .wt-unit-toggle { background: var(--v2-surface-sunken); border-radius: var(--v2-r-md); }
.v2 .wt-seg button, .v2 .wt-unit-btn {
  border-radius: var(--v2-r-sm); font-weight: 600; color: var(--v2-ink-2);
}
.v2 .wt-seg button[aria-pressed="true"], .v2 .wt-seg button.is-active,
.v2 .wt-seg button.is-on, .v2 .wt-unit-btn.is-on {
  background: var(--v2-surface); color: var(--v2-ink); box-shadow: var(--v2-sh-card);
}

/* ─── Records list ──────────────────────────────────────────── */
.v2 .wt-row { border-bottom: 1px solid var(--v2-line); }
.v2 .wt-row-weight { font-weight: 700; letter-spacing: var(--v2-num-tracking); }
.v2 .wt-row-date, .v2 .wt-row-bmi, .v2 .wt-row-note { color: var(--v2-ink-3); }
.v2 .wt-delta-pill { border-radius: var(--v2-r-pill); font-weight: 600; }

/* ─── Modal ─────────────────────────────────────────────────── */
.v2 .wt-modal {
  background: var(--v2-surface);
  border-radius: var(--v2-r-xl);
  box-shadow: var(--v2-sh-pop);
  border: none;
}
.v2 .wt-modal-sub { color: var(--v2-ink-2); }
.v2 .wt-modal-err { color: var(--v2-bad); }
.v2 .wt-field input, .v2 .wt-field select, .v2 .wt-field textarea {
  font-family: var(--v2-font);
  /* 16px minimum, or iOS zooms the page on focus. */
  font-size: var(--v2-fs-control);
  border: 1.5px solid var(--v2-line-2);
  border-radius: var(--v2-r-md);
  background: var(--v2-surface);
  color: var(--v2-ink);
}
.v2 .wt-field input:focus,
.v2 .wt-field select:focus,
.v2 .wt-field textarea:focus { border-color: var(--v2-brand-strong); }
/* Hard-coded #FBE9DC / #8c3a25 — the only pair the token bridge cannot reach. */
.v2 .wt-modal-err { background: var(--v2-c-move-tint); color: var(--v2-bad); }

/* The goal ring's track is a hard-coded #EDE6D2, and its numerals ask
   for Noto by name inside the SVG — neither is reachable through the
   token bridge. */
.v2 .wt-goal-ring-bg { stroke: var(--v2-surface-sunken); }
.v2 .wt-goal-ring-pct { font-family: var(--v2-font); fill: var(--v2-ink); }
.v2 .wt-goal-ring-sub { fill: var(--v2-ink-3); }

/* Remaining hard-coded warm hexes: the chip hover tint and the chart
   tooltip's date line. */
.v2 .wt-chip:hover { background: var(--v2-surface-2); }
.v2 .wt-tooltip { background: rgba(26, 33, 30, .93); }
.v2 .wt-tooltip .wt-tip-date { color: rgba(255, 255, 255, .72); }

/* ─── Empty states ──────────────────────────────────────────── */
.v2 .wt-empty, .v2 .wt-chart-empty, .v2 .wt-goal-empty { color: var(--v2-ink-3); }