/* Vittafy shared base - loaded by every page (homepage, guides, calculators, 404).
   Owns what must be identical everywhere: palette tokens, keyboard focus, skip link,
   touch targets, reduced-motion baseline. Page layout stays inline; page-specific
   motion policy lives in homepage.css. */

:root {
  /* Palette. The inline styles reference these; change a colour here, not per page. */
  --vf-forest: #14432B;       /* primary ink + dark surfaces */
  --vf-forest-deep: #0F3D22;  /* text on lime, deepest surface */
  --vf-forest-night: #10331F; /* inset panels on forest */
  --vf-moss: #2E6B33;         /* links, accents on light */
  --vf-leaf: #157A41;
  --vf-body: #3D5A44;         /* body copy on light, 7.5:1 on paper */
  --vf-muted: #54705B;        /* secondary copy on light, 5.1:1 on paper */
  --vf-mist: #D6E9CE;         /* text on forest */
  --vf-sage: #A9C7A6;         /* secondary text on forest, 6.1:1 */
  --vf-sage-lt: #B7D8A8;
  --vf-sage-dk: #8FB08A;      /* tertiary text on forest ONLY (4.7:1); fails on light */
  --vf-paper: #F4FAF1;        /* page background */
  --vf-snow: #F3FBEE;         /* headings on forest */
  --vf-line: #E9F2E4;
  --vf-white: #FFFFFF;
  --vf-lime: #E6F03B;
  --vf-lime-hi: #F2F85C;
}

html { -webkit-text-size-adjust: 100%; }

/* Text selection and caret carry the palette instead of the browser default. */
::selection { background: var(--vf-lime-hi); color: var(--vf-forest-deep); }
input { caret-color: var(--vf-moss); }

/* ---- Keyboard focus -------------------------------------------------------
   One two-tone ring that reads on both the paper and the forest surfaces: white
   inside, forest outside. !important because many controls set outline/box-shadow
   inline. Mouse clicks never show it (:focus-visible). */
:focus-visible {
  outline: 2px solid var(--vf-white) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px var(--vf-forest) !important;
}
/* The calculator number fields are borderless inside a bordered wrapper: ring the
   wrapper, not the bare text. */
input[style*="outline:none"]:focus-visible { outline: none !important; box-shadow: none !important; }
div:has(> input[style*="outline:none"]:focus-visible) {
  outline: 2px solid var(--vf-white);
  box-shadow: 0 0 0 4px var(--vf-forest);
}

/* ---- Skip link ---------------------------------------------------------- */
.vf-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  display: flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px;
  background: var(--vf-lime); color: var(--vf-forest-deep);
  font: 600 14px/1 'Poppins', sans-serif; text-decoration: none;
}
.vf-skip:focus { top: 12px; }
/* <main> is only the skip link's focus target, not a control: no ring on it. */
main:focus-visible { outline: none !important; box-shadow: none !important; }

/* Visually hidden, still announced (screen-reader status text). */
.vf-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- Touch targets ---------------------------------------------------------
   Coarse pointers only, so desktop layouts stay as designed. Header controls get a
   44px floor; footer/nav text links keep their visual size but gain a 44px hit area
   (padding grown, margin pulled back so the layout does not move). */
@media (pointer: coarse) {
  header a, header button, header summary { min-height: 44px; }
  footer a:not([class*="btn"]), nav a { padding-block: 12px; margin-block: -12px; }
}

/* ---- Reduced motion baseline ---------------------------------------------
   Kept to what every page needs. Decorative loops are switched off per page
   (see homepage.css); we do not blanket-kill animation, because that also removes
   feedback such as a loading spinner or a live-status pulse. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-vf-header] { transition: none !important; }
}