/* bacwaterstar.com — LOCKED DESIGN TOKENS (single source of truth)
   Design brief: a warm, trustworthy pharmacy for a US + US-Hispanic audience, 45-65+,
   mobile-first. Calm and credible, but friendlier than a cold clinical white-box.

   v2 (2026-09-07): "30% larger + warmer/friendlier" per request, aligned with the
   PPS Sept-7 canon direction (WIDE desktop frame ~ competitor-measured; warm palette;
   wide-frame / readable-text-column principle). Changes from v1:
   - Type scale bumped ~30% (body 18->20px hard floor for the 45-65+ audience).
   - Frame widened to a real ~1200px page; reading column stays readable (~62rem).
   - Palette warmed: warmer bone paper, softer ink, a warm GOLD trust accent alongside
     the pharmacy teal, larger radii for a softer, friendlier feel.
   Enforced by DC-TOKENS (no raw hex outside this file; body >= 18px, now 20px).
*/
:root {
  /* --- color (warmed) --- */
  --ink:        #1c3a34;  /* softened deep pharmacy green-ink (was #16302f) */
  --ink-soft:   #4a635d;  /* secondary text, a touch warmer */
  --paper:      #f7f3ea;  /* warm bone paper (was cooler #fbfaf6) — friendlier ground */
  --surface:    #fffdf8;  /* warm off-white cards (was pure #ffffff) */
  --teal:       #0f766e;  /* pharmacy teal — trust + primary action */
  --teal-dark:  #0b5a53;  /* accent hover */
  --gold:       #c98a2b;  /* warm gold — secondary warmth accent (headings flourish, rules) */
  --gold-soft:  #f3e6cf;  /* soft gold wash for warm panels */
  --line:       #e3ddcf;  /* warmer hairline (was cool grey) */
  --warn-bg:    #fdf3e0;  /* warm notice panel */
  --warn-line:  #e4c986;

  /* --- type (~30% larger) --- */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body:   1.25rem;    /* 20px (was 18px) — +~11%; hard floor raised for readability */
  --fs-small:  1.0625rem;  /* 17px (was 16px) */
  --fs-lead:   1.5rem;     /* 24px (was 21px) */
  --fs-h3:     1.6rem;     /* ~26px (was 22px) */
  --fs-h2:     2.15rem;    /* ~34px (was 28px) */
  --fs-h1:     2.85rem;    /* ~46px mobile (was 36px) */
  --lh-body:   1.7;
  --lh-head:   1.15;

  /* --- space / shape (larger, softer) --- */
  --maxw:      62rem;      /* ~992px reading column (was 54rem) — wider, still readable */
  --frame:     75rem;      /* ~1200px page FRAME for header/footer/grids (wide, competitor-aligned) */
  --pad:       1.5rem;     /* roomier gutters (was 1.25rem) */
  --radius:    14px;       /* softer corners (was 10px) — friendlier */
  --tap:       48px;       /* min tap target (was 44px) — matches PPS a11y gate */
}

@media (min-width: 48em) {
  :root { --fs-h1: 3.4rem; }  /* ~54px desktop (was 44px) */
}

/* USAGE NOTE (v2): --maxw is the readable text column; --frame is the wide page frame.
   Header, footer, and card grids may use --frame for a wide ~1200px desktop feel while
   body prose stays on --maxw so lines don't get too long. This is the PPS-canon
   "wide desktop, readable column" pattern, measured against real competitors. Mobile
   collapses to a single stacked column automatically. */

/* skip-to-content (WCAG 2.2) — visible on keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--teal);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius) 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}