/* ───── Estate Linen — shared signature components ─────
   Web mirror of estate-linen-design-system/components/*.jsx. Linked on
   every page AFTER vinea-theme.css and BEFORE the page's inline <style>
   (so page-specific rules can still override where needed). Uses only
   tokens from vinea-theme.css — no hardcoded hexes. */

/* Gold small-caps kicker — sits above a serif title (HeaderBand kicker). */
.kicker{
  font: 600 11px/1 var(--sans);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

/* Ink small-caps section label with a trailing hairline (SectionHeader). */
.section-label{
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 12px/1 var(--sans);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--ink-2);
}
.section-label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-2);
}

/* Deep vine-ink header band — serif-italic title on ink, cream text
   (HeaderBand). Bottom corners rounded like the app's screen headers. */
.ink-band{
  background: var(--band);
  color: var(--text-on-ink);
  border-radius: 0 0 var(--radius-header-band) var(--radius-header-band);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
}
.ink-band .kicker{ color: var(--gold); }
.ink-band-rounded{ border-radius: var(--radius-header-band); }
.on-ink-title{
  font: italic 500 clamp(30px, 5vw, 44px)/1.05 var(--serif);
  color: var(--text-on-ink);
  margin: 0;
}
.on-ink-muted{ color: var(--text-on-ink-muted); }

/* Cream "label-paper" card with the fine double rule (EstateCard hero).
   The inner rule is an inset pseudo-border, matching the app's 5px inset. */
.label-card{
  position: relative;
  background: var(--card-solid);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.label-card::before{
  content: "";
  position: absolute;
  inset: 5px;
  border: 0.5px solid var(--border-inner-rule);
  border-radius: var(--radius-card-inner);
  pointer-events: none;
}
.label-card > *{ position: relative; }

/* Vine-ink capsule button with ink-tinted shadow (EstateButton primary).
   Inverts in dark: cream fill, ink label — an ink button disappears on the
   dark background. */
.btn-ink{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: none;
  border-radius: var(--radius-capsule);
  box-shadow: var(--shadow-button);
}
.btn-ink:hover{ filter: brightness(1.08); }

/* Wine-red badge capsule (TabBar badge / due counts). */
.badge-vintage{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-capsule);
  background: var(--wine-badge);
  color: var(--cream-on-ink);
  font: 700 11px/1 var(--sans);
}