/* ============================================================
   Vedic Pathway — Base / element defaults
   Applies the foundations to bare HTML so cards & kits inherit
   the brand without per-element work.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-heading); }
h3 { font-size: var(--text-xl);  line-height: var(--leading-heading); font-weight: var(--weight-medium); }
h4 { font-size: var(--text-lg);  line-height: var(--leading-snug); font-weight: var(--weight-semibold); }

p {
  margin: 0 0 1em;
  line-height: var(--leading-body);
  text-wrap: pretty;
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--action-primary-hover); }

strong { font-weight: var(--weight-bold); }

small {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

hr {
  border: none;
  border-top: var(--border-w) solid var(--border-hairline);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--vp-saffron-wash);
  color: var(--vp-saffron-darker);
}

/* --- Brand utility classes (used in logotype + eyebrows) --- */
.vp-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-trust);
}

.vp-logotype {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}
.vp-logotype .vedic { color: var(--text-trust); }      /* "Vedic" — Sage */
.vp-logotype .pathway {
  color: var(--text-accent);                            /* "Pathway" — Saffron */
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
}

/* --- The signature hairline-flanked geometric divider --- */
.vp-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--vp-gold);
}
.vp-divider::before,
.vp-divider::after {
  content: "";
  flex: 1;
  height: var(--border-w);
  background: var(--border-hairline);
}