/* ============================================================
   Vinner Labs — Base resets & a few brand helpers.
   Tokens live in the other files; this applies sensible defaults.
   ============================================================ */

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

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }

/* ---- Brand helper classes (optional, for prose & specimens) ---- */
.vin-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand);
}

.vin-gradient-text {
  background: var(--vin-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vin-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Luminosity-aware text ----
   On any dark / gradient surface, add class "vin-on-dark" (or the
   [data-on-dark] attribute). It re-scopes the semantic text + line tokens
   to light values, so every token-driven element inside — headings, body,
   muted captions, borders, dividers — flips automatically. Because base
   headings use var(--text-strong), they invert too without per-element color. */
.vin-on-dark,
[data-on-dark] {
  --text-strong:   #FFFFFF;
  --text-body:     rgba(255, 255, 255, 0.92);
  --text-muted:    rgba(255, 255, 255, 0.70);
  --text-subtle:   rgba(255, 255, 255, 0.52);
  --text-link:     #FFFFFF;
  --border:        rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.30);
  --divider:       rgba(255, 255, 255, 0.16);
  --surface-sunken: rgba(255, 255, 255, 0.06);

  /* Accent colours have to invert too, and this block used to stop at the
     neutrals. --brand is solved for a light page, so on a dark ground it was
     4.14:1 at #DE0591 and 3.31:1 once it moved to magenta-600 — under AA either
     way. The action chain steps back UP the ramp here.
     Line inks are likewise light-page values; on dark the identity colours are
     already the legible ones, except vinarom (3.85) and vincol (4.15), which
     get lightened variants. */
  --brand:         var(--magenta-400);   /* 5.39:1 on #170920 */
  --brand-hover:   var(--magenta-300);   /* 7.91:1 */
  --brand-active:  var(--magenta-200);   /* 11.54:1 */
  /* --text-link stays #FFFFFF above: links on dark are deliberately white. */

  --line-sunbest-ink:     var(--line-sunbest);    /* 9.59:1 */
  --line-vinpep-ink:      var(--line-vinpep);     /* 5.62:1 */
  --line-vinshield-ink:   var(--line-vinshield);  /* 5.68:1 */
  --line-vintan-ink:      var(--line-vintan);     /* 5.68:1 */
  --line-vinarom-ink:     #B96480;                /* 4.76:1 */
  --line-vincol-hair-ink: #E43774;                /* 4.67:1 */
  --line-vincol-dyes-ink: #E43774;                /* 4.67:1 */
}

::selection { background: var(--magenta-200); color: var(--text-strong); }

/* Cross-document view transitions (2026-09-17).
   Navigating between pages animates like a pushed screen on iOS: the
   outgoing page recedes, the incoming page settles up into place on the
   smooth spring, and the dock and top chrome, which are identical on both
   pages, are named so they hold still instead of cross-fading. Engines
   without cross-document view transitions simply load the page. Reduced
   motion opts out entirely rather than shortening the animation. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  nav[data-screen-label="Dock"] { view-transition-name: vin-dock; }
  [data-screen-label="Chrome"]  { view-transition-name: vin-chrome; }

  ::view-transition-group(vin-dock),
  ::view-transition-group(vin-chrome) { animation-duration: 0s; }

  ::view-transition-old(root) {
    animation: vin-vt-out 180ms var(--spring-smooth, ease-out) both;
  }
  ::view-transition-new(root) {
    animation: vin-vt-in 460ms var(--spring-smooth, ease-out) 40ms both;
  }
}

@keyframes vin-vt-out {
  to { opacity: 0; transform: scale(0.985); }
}
@keyframes vin-vt-in {
  from { opacity: 0; transform: translateY(14px); }
}