/* Vita Health 365 — VH design tokens for the /mypage redesign.
 *
 * Loaded alongside (not replacing) /assets/styles.css. The legacy
 * --cream / --forest / --paper tokens stay where they are — every
 * existing page still reads them. The --vh-* tokens are additive: new
 * /mypage widgets read these, old widgets keep working unchanged.
 *
 * Reference: vita-health-365-mypage-redesign-spec.md §2.1.
 */
:root {
  /* ── Surfaces ──────────────────────────────────────────────── */
  --vh-bg-page:        #F5EFE3;
  --vh-bg-card:        #FAF6EE;
  --vh-bg-card-alt:    #EFE8D5;
  --vh-bg-dark:        #2F3A2E;
  --vh-bg-dark-soft:   #3F4A3E;

  /* ── Accents ───────────────────────────────────────────────── */
  --vh-accent-gold:        #D9B775;
  --vh-accent-sage:        #8FA77E;
  --vh-accent-sage-soft:   #E5EDDA;
  --vh-accent-sage-dark:   #4A6B2E;
  --vh-accent-terra:       #C76F3D;
  --vh-accent-terra-soft:  #F6D6C5;

  /* ── Text ──────────────────────────────────────────────────── */
  --vh-text-primary:        #1F2A1F;
  --vh-text-secondary:      #7A7560;
  --vh-text-tertiary:       #8A8470;
  --vh-text-inverse:        #F5EFE3;
  --vh-text-inverse-muted:  #B8B2A0;

  /* ── Borders ───────────────────────────────────────────────── */
  --vh-border-light:    #E5DECB;
  --vh-border-subtle:   #D4CFC0;

  /* ── Radii ─────────────────────────────────────────────────── */
  --vh-radius-card: 14px;
  --vh-radius-hero: 18px;
  --vh-radius-pill: 8px;

  /* ── Typography ────────────────────────────────────────────── */
  /* Pretendard (Korean-first sans) + system fallback for non-KR locales.
     The legacy --mp-font (Noto Sans / Noto Sans KR) stays available so
     the existing weight-tracker reads untouched. */
  --vh-font-sans:  'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --vh-font-serif: 'Noto Serif KR', Georgia, 'Iowan Old Style', 'Apple Garamond', serif;

  /* Uppercase eyebrow letter-spacing — used in breadcrumbs, card
     headers, milestone tags. Spec §2.2: 1.5–2.5px. */
  --vh-eyebrow-tracking: 2.5px;
}

/* ── Utility classes ────────────────────────────────────────────
   Designed so HTML in the new redesign can reach for these without
   reimplementing rules per-card. Names mirror spec wording. */
.vh-eyebrow {
  font-size: 10px;
  letter-spacing: var(--vh-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--vh-accent-sage);
  font-weight: 500;
}
.vh-serif {
  font-family: var(--vh-font-serif);
  font-weight: 500;
}
.vh-sans  { font-family: var(--vh-font-sans); }

.vh-card {
  background: var(--vh-bg-card);
  border-radius: var(--vh-radius-card);
  padding: 16px;
}
.vh-card-hero {
  background: var(--vh-bg-dark);
  color: var(--vh-text-inverse);
  border-radius: var(--vh-radius-hero);
  padding: 22px;
}

/* Segmented control — used by the unit toggle on the setup card and
   by the trend chart period toggle. role="radiogroup" recommended. */
.vh-segmented {
  display: inline-flex;
  gap: 2px;
  background: var(--vh-bg-card-alt);
  padding: 3px;
  border-radius: var(--vh-radius-pill);
}
.vh-segmented > .vh-segmented-opt {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--vh-text-secondary);
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  border: none;
  background: transparent;
}
.vh-segmented > .vh-segmented-opt[aria-checked="true"],
.vh-segmented > .vh-segmented-opt.is-active {
  background: var(--vh-bg-dark);
  color: var(--vh-text-inverse);
  font-weight: 500;
}
.vh-segmented > .vh-segmented-opt:focus-visible {
  outline: 2px solid var(--vh-accent-gold);
  outline-offset: 1px;
}

/* Focus ring — spec §12: 2px gold outline on all interactive elements. */
.vh-focus:focus-visible,
.vh-card a:focus-visible,
.vh-card button:focus-visible {
  outline: 2px solid var(--vh-accent-gold);
  outline-offset: 2px;
}