/* ============================================================================
   v21-primitives.css — the .v-* primitive set. THREE ROUTES, not the estate.
   ----------------------------------------------------------------------------
   This was v21-system.css, which tools/apply_chrome.py appended to all 219
   routes. Gate 3d retired it along with the rest of the v21 base — and the
   homepage's primary button went with it, rendering "Request a Pooja" as plain
   text at 1.54:1. tools/verify_home_a11y.js caught it on the next build.

   The lesson is the one this whole migration keeps relearning: a sheet is not
   dead because its TOKENS moved. These .v-* rules are live components on
   index.html, ceremonies.html and credits.html, and they will be live until
   each of those pages is rebuilt against v24-components.css. So the file comes
   back as what it actually is — a page sheet for three routes — rather than
   sitewide furniture.

   Its :root block is gone: every --v-* name it uses resolves through the alias
   block in v24-tokens.css, so these components are on the canonical palette
   even though their rules have not moved.

   .crumb was removed here, not aliased: v24-components.css owns the breadcrumb,
   this sheet loads after it, and two owners for one object is the defect
   verify_component_governance.py rule 1 exists to refuse.
   ============================================================================ */

/* ============================================================================
   v21-system.css — the v21 design system. LEGACY ROUTES ONLY as of 2026-10-03.
   ----------------------------------------------------------------------------
   Two parts left this file in v25 Gate 2 and nothing else changed:

     the /* The prefers-contrast re-point that stood here was deleted on
   2026-10-04 (v25 Gate 3d). It pointed --line at --line-strong, the two
   muted inks at --ink and --cream-2 at --surface; v24-tokens.css now
   makes exactly those moves on the canonical names that these alias to,
   so keeping a second copy would be two files deciding one thing. */
.v-wrap-c { width: 100%; max-width: var(--v-content); margin-inline: auto; padding-inline: var(--v-gutter); }
.v-read   { max-width: 68ch; }

.v-sec       { padding-block: var(--v-sec); }
.v-sec-tight { padding-block: var(--v-sec-tight); }
.v-band      { background: var(--v-ivory-2); }

.v-eyebrow {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--v-bronze); margin: 0 0 var(--v-3);
}
.v-h2 {
  font-family: var(--v-display); font-size: var(--v-t-h2); line-height: 1.16;
  color: var(--v-ink); margin: 0 0 var(--v-4); text-wrap: balance; font-weight: 400;
}
.v-h3 {
  font-family: var(--v-display); font-size: var(--v-t-h3); line-height: 1.28;
  color: var(--v-ink); margin: 0 0 var(--v-2); font-weight: 400;
}
.v-lede { font-size: var(--v-t-body); line-height: 1.72; color: var(--v-ink-2); margin: 0; }
.v-meta { font-size: var(--v-t-xs); color: var(--v-ink-3); }

/* ------------------------------------------------------------------ buttons */
/* One shape language: moderately rounded for actions. Pills are reserved for
   filters and statuses, so a pill never reads as a primary action. */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v-2);
  min-height: 46px; padding: 12px 22px; border-radius: var(--v-radius);
  font-family: var(--v-sc); font-size: .84rem; letter-spacing: .07em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v-btn-primary   { background: var(--v-maroon); color: #fff; }
.v-btn-primary:hover  { background: var(--v-maroon-deep); }
.v-btn-secondary { border-color: var(--v-bronze); color: var(--v-maroon); background: transparent; }
.v-btn-secondary:hover { background: var(--v-ivory-2); }
.v-btn-quiet     { color: var(--v-ink-2); padding-inline: 4px; min-height: 44px; }
.v-btn-quiet:hover { color: var(--v-maroon); }

/* a text link that is a link, not a button — §18 keeps the two distinct */
.v-link { color: var(--v-maroon); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v-link:hover { text-decoration-thickness: 2px; }

/* focus is never animated: a ring that grows from zero is absent at the moment
   focus lands. That defect was found on this site in v18 and must not return. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--v-ring) solid var(--v-saffron); outline-offset: 2px;
  transition: none !important;   /* the one exception, and this is its reason */
  border-radius: var(--v-radius-s);
}

/* ------------------------------------------------------------------- chips  */
.v-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--v-ivory-3); background: var(--v-paper);
  font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-2);
  text-decoration: none;
}
.v-chip:hover { border-color: var(--v-bronze-soft); color: var(--v-maroon); }

/* --------------------------------------------------------------- ornaments  */
.v-rule { display: flex; align-items: center; gap: var(--v-3); color: var(--v-bronze-soft); }
.v-rule::before, .v-rule::after { content: ""; height: 1px; background: currentColor; flex: 1 1 auto; }
.v-rule-l::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ============================================================================
   THE BUTTON'S OWN COLOUR, RESTATED SO IT WINS. (v25 Gate 3d)

   `.v-btn-primary { color: #fff }` is specificity (0,1,0). Two page sheets
   carry `a[class] { color: inherit }` at (0,1,1) and load later, so the
   homepage's primary call to action rendered body ink on temple maroon:
   1.54 : 1, measured by tools/verify_home_a11y.js at 1440px and 390px.

   This is the SECOND time this exact defect has been shipped. The v24 gate-2
   review records it as `.vh-cta a { color: inherit }` beating the same
   declaration and producing 2.11 : 1. It came back because the scoping rule
   that fixed a different problem — bare prose links on the wedding guide had
   no colour and no underline, which is SC 1.4.1 — was written as `a[class]`,
   and a button is a link with a class.

   So the colours are restated at a specificity no `a[class]` rule can reach,
   and on the canonical tokens rather than on #fff. The measured pairs:

     maroon ground, ground text      9.24 : 1
     cream ground, maroon text       9.24 : 1
     footer band, inverted pair      9.71 : 1
   ============================================================================ */
a.v-btn.v-btn-primary   { color: var(--sp-ground); }
a.v-btn.v-btn-secondary { color: var(--sp-maroon); }
/* The footer band inverts both, and must still beat the rule above. */
.vf a.v-btn.v-btn-primary   { background: var(--sp-paper); color: var(--sp-maroon); }
.vf a.v-btn.v-btn-secondary { color: var(--sp-ground); border-color: rgba(255, 255, 255, .5); }