/* Belle Design System: component stylesheet.
 * Matches joinbelle.com (joinbelle repo, origin/main 2026-09-23). Loaded after tokens.css.
 * Brockmann is the only face; its four weights come from tokens.json (fonts/). */

:root {
  --fs-h3: 1.125rem;
  --fs-eyebrow: 0.75rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --lh-body: 1.625;
  --tracking-eyebrow: 0.1em;
}

/* ── Semantic type classes (legacy names, now site values) ── */
.belle-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--fg); }
.belle-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1; color: var(--fg); }
.belle-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.4; }
.belle-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.55; }
.belle-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg); }
.belle-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); }
.belle-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-muted); }
.belle-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.43; color: var(--fg-muted); }
.belle-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.33; color: var(--fg-muted); }
.belle-pullquote, .belle-editorial { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; color: var(--fg); }
.belle-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.625rem; letter-spacing: -0.015em; text-transform: lowercase; color: var(--fg); }

.belle-base, .belle-base * { box-sizing: border-box; }
.belle-base { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.belle-base h1, .belle-base h2, .belle-base h3 { font-family: var(--font-display); font-weight: 700; }
.belle-base a { color: var(--fg-brand); text-decoration: none; }
.belle-base a:hover { color: var(--belle-blue-dark); }
.belle-base :focus-visible, .bds :focus-visible, .bds:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Button ── */
.bds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease, color 150ms ease, box-shadow 200ms ease, transform 150ms ease; white-space: nowrap; }
.bds-btn:active { transform: scale(0.97); }
.bds-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bds-btn--md { font-size: 16px; padding: 16px 28px; }
.bds-btn--sm { font-size: 12px; padding: 8px 16px; min-height: 32px; }
.bds-btn--primary { background: var(--belle-dark); color: var(--belle-white); box-shadow: var(--shadow-cta); }
.bds-btn--primary:hover { background: var(--belle-dark-hover); }
.bds-btn--secondary { background: rgba(255, 255, 255, 0.7); color: var(--belle-dark); border-color: var(--border-strong); }
.bds-btn--secondary:hover { background: var(--belle-white); }
.bds-btn--sm.bds-btn--secondary { box-shadow: var(--shadow-xs); }
.bds-btn--brand { background: var(--belle-blue); color: var(--belle-white); }
.bds-btn--brand:hover { background: var(--belle-blue-dark); }
.bds-btn--dark { background: var(--belle-navy); color: var(--belle-white); text-transform: uppercase; letter-spacing: 0.025em; font-weight: 700; }
.bds-btn--dark:hover { background: var(--belle-dark); }
.bds-btn--yellow { background: var(--belle-yellow); color: var(--belle-dark); }
.bds-btn--yellow:hover { background: var(--belle-yellow-dark); }
.bds-btn--link { background: none; color: var(--fg-brand); padding-left: 0; padding-right: 0; min-height: 0; }
.bds-btn--link:hover { color: var(--belle-blue-dark); }
.bds-btn--chip { background: transparent; color: rgba(26, 26, 26, 0.7); font-size: 12px; text-transform: uppercase; letter-spacing: 0.025em; padding: 6px 12px; min-height: 0; }
.bds-btn--chip:hover { color: var(--belle-dark); background: rgba(26, 26, 26, 0.05); }
.bds-btn--chip.is-active { background: var(--belle-yellow); color: var(--belle-dark); }
.bds-btn--chip.is-active:hover { background: var(--belle-yellow-dark); }
.bds-btn__arrow { transition: transform 200ms ease; }
.bds-btn:hover .bds-btn__arrow { transform: translateX(4px); }

/* ── Badge ── */
.bds-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; padding: 5px 10px; white-space: nowrap; }
.bds-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.bds-badge--new { background: var(--belle-yellow); color: var(--belle-dark); }
.bds-badge--info { background: var(--belle-blue); color: var(--belle-white); }
.bds-badge--success { background: rgba(0, 187, 165, 0.14); color: #00685c; }
.bds-badge--success .bds-badge__dot { background: var(--belle-teal); }
.bds-badge--warning { background: var(--belle-clay-soft); color: var(--belle-clay-dark); }
.bds-badge--warning .bds-badge__dot { background: var(--belle-clay); }
.bds-badge--neutral { background: rgba(26, 26, 26, 0.06); color: rgba(26, 26, 26, 0.7); }

/* ── Card ── */
.bds-card { border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 6px; align-content: start; font-family: var(--font-body); transition: box-shadow 300ms ease; }
.bds-card--white { background: var(--belle-white); border: 1px solid var(--belle-border); box-shadow: var(--shadow-xs); color: var(--belle-dark); }
.bds-card--white.is-interactive:hover { box-shadow: var(--shadow-md); }
.bds-card--surface { background: var(--belle-surface); color: var(--belle-dark); }
.bds-card--ink { background: var(--belle-dark); color: var(--belle-white); }
.bds-card--navy { background: var(--belle-navy); color: var(--belle-white); }
.bds-card--blue { background: var(--belle-blue); color: var(--belle-white); }
.bds-card__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-brand); }
.bds-card--ink .bds-card__eyebrow, .bds-card--navy .bds-card__eyebrow, .bds-card--blue .bds-card__eyebrow { color: var(--belle-yellow); }
.bds-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3; }
.bds-card__body { font-size: 14px; line-height: 1.5; color: rgba(26, 26, 26, 0.7); }
.bds-card--ink .bds-card__body, .bds-card--navy .bds-card__body, .bds-card--blue .bds-card__body { color: rgba(255, 255, 255, 0.8); }

/* ── Highlight (the marker) ── */
.bds-hl { position: relative; display: inline-block; isolation: isolate; }
.bds-hl__mark { position: absolute; left: -0.04em; right: -0.04em; top: 0.45em; bottom: 0.06em; z-index: -1; background: linear-gradient(to top, var(--bds-hl, var(--belle-yellow)) 65%, transparent); }
.bds-hl--yellow { --bds-hl: var(--belle-yellow); }
.bds-hl--blue { --bds-hl: rgba(0, 126, 177, 0.7); }
.bds-hl--pink { --bds-hl: var(--belle-pink); }
.bds-hl--navy { --bds-hl: rgba(14, 42, 58, 0.4); }

/* ── Eyebrow ── */
.bds-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--belle-dark); }
.bds-eyebrow__rule { width: 22px; height: 1px; background: currentColor; flex: none; }
.bds-eyebrow--light { color: var(--belle-white); }

/* ── CheckList ── */
.bds-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(26, 26, 26, 0.7); }
.bds-checks li { display: flex; gap: 10px; align-items: flex-start; }
.bds-check { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 999px; background: var(--belle-yellow); display: grid; place-items: center; color: var(--belle-dark); }
.bds-checks--light { color: rgba(255, 255, 255, 0.85); }

/* ── TrustStrip ── */
.bds-trust { background: var(--belle-navy); color: var(--belle-white); display: flex; flex-wrap: wrap; gap: 10px 40px; align-items: center; padding: 12px 24px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.bds-trust--rounded { border-radius: var(--radius-xl); }
.bds-trust__item { display: inline-flex; align-items: center; gap: 8px; }
.bds-trust__item svg { color: var(--belle-yellow); flex: none; }

/* ── Nav ── */
.bds-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px 10px 20px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(229, 231, 235, 0.8); box-shadow: var(--shadow-sm); font-family: var(--font-body); }
.bds-nav__logo { display: block; height: 24px; width: auto; color: var(--belle-dark); }
.bds-nav__items { display: flex; flex-wrap: wrap; gap: 2px; }
.bds-nav__actions { display: flex; gap: 8px; align-items: center; }

/* ── StatTile ── */
.bds-stat { border-radius: var(--radius-xl); padding: 18px 20px; display: grid; gap: 4px; align-content: start; font-family: var(--font-body); background: var(--belle-surface); color: var(--belle-dark); }
.bds-stat--ink { background: var(--belle-dark); color: var(--belle-white); }
.bds-stat--white { background: var(--belle-white); border: 1px solid var(--belle-border); }
.bds-stat__value { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bds-stat--ink .bds-stat__value { color: var(--belle-yellow); }
.bds-stat__value.is-bad { color: var(--fg-accent); }
.bds-stat__label { font-size: 14px; line-height: 1.4; }
.bds-stat__detail { font-size: 12.5px; line-height: 1.4; color: rgba(26, 26, 26, 0.7); }
.bds-stat--ink .bds-stat__detail { color: rgba(255, 255, 255, 0.7); }

/* ── ChartPalette ── */
.bds-palette { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-body); font-size: 13px; color: rgba(26, 26, 26, 0.7); }
.bds-palette__item { display: inline-flex; align-items: center; gap: 8px; }
.bds-palette__sw { width: 14px; height: 14px; border-radius: 4px; }

/* ── Rose (women's health) and pink (Belle Cares) tones, added 2026-09-29 ──
 * Copied from the women's health landing page (belle-rose classes) and joinbelle.com/belle-cares.
 * Each new color carries its hex as a fallback so the tones render even before tokens.css regenerates. */

/* Highlight */
.bds-hl--rose { --bds-hl: rgba(179, 96, 138, 0.35); }
.bds-hl--pink-light { --bds-hl: var(--belle-pink-light, #f9c6de); }

/* Button */
.bds-btn--rose { background: var(--belle-rose-deep, #9c4a72); color: var(--belle-white); }
.bds-btn--rose:hover { background: var(--belle-rose-text, #8d3f66); }
.bds-btn--pink-light { background: var(--belle-pink-light, #f9c6de); color: var(--belle-dark); }
.bds-btn--pink-light:hover { filter: brightness(0.95); }

/* Badge */
.bds-badge--rose { background: var(--belle-rose-soft, #f2dde8); color: var(--belle-rose-text, #8d3f66); }
.bds-badge--rose .bds-badge__dot { background: var(--belle-rose, #b3608a); }
.bds-badge--pink-light { background: var(--belle-pink-light, #f9c6de); color: var(--belle-dark); }

/* Card */
.bds-card--rose { background: var(--belle-rose-deep, #9c4a72); color: var(--belle-white); }
.bds-card--rose .bds-card__eyebrow { color: var(--belle-yellow); }
.bds-card--rose .bds-card__body { color: rgba(255, 255, 255, 0.9); }
.bds-card--rose-soft { background: rgba(242, 221, 232, 0.5); border: 1px solid rgba(179, 96, 138, 0.3); color: var(--belle-dark); }
.bds-card--rose-soft .bds-card__eyebrow { color: var(--belle-rose-text, #8d3f66); }
.bds-card--blush { background: linear-gradient(170deg, var(--belle-white), var(--belle-blush, #fde8f1)); border: 1px solid var(--belle-border); color: var(--belle-dark); }
.bds-card--blush .bds-card__eyebrow { color: var(--belle-navy); }
.bds-card--navy-glow { background: linear-gradient(120deg, var(--belle-navy-mid, #163a4e) 0%, rgba(0, 126, 177, 0.3) 65%, rgba(242, 141, 191, 0.28) 100%), var(--belle-navy); color: var(--belle-white); }
.bds-card--navy-glow .bds-card__eyebrow { color: var(--belle-sky, #7cc4e2); }
.bds-card--navy-glow .bds-card__body { color: rgba(255, 255, 255, 0.8); }

/* Eyebrow */
.bds-eyebrow--rose { color: var(--belle-rose-text, #8d3f66); }
.bds-eyebrow--sky { color: var(--belle-sky, #7cc4e2); }

/* CheckList */
.bds-checks--rose .bds-check { background: var(--belle-rose, #b3608a); color: var(--belle-white); }
.bds-checks--pink-light .bds-check { background: var(--belle-pink-light, #f9c6de); color: var(--belle-dark); border-radius: 4px; }

/* TrustStrip */
.bds-trust--rose { background: var(--belle-rose-deep, #9c4a72); }