/* ============================================================
   Be The Change Health & Wellness Center
   Design tokens, the single source of truth for the whole site.
   Palette hex values are owner-specified and MUST NOT be altered.
   Role assignments come from the project brief §3.
   ============================================================ */

:root {
  /* ---- Brand palette (owner-specified, do not change hex) ---- */
  --c-ocean:        #1F668C;  /* PRIMARY. Links, primary buttons (white label), headings. 6.3:1 on white, AA */
  --c-aqua:         #51B7CE;  /* SECONDARY, per brief §3. Accents, rules, icon fills, tinted washes.
                                 ~2.3:1, so it is NEVER text and never a fill behind a light label. */
  --c-botanical:    #16734A;  /* The accessible stand-in for aqua wherever secondary has to carry
                                 text or a label: aqua cannot reach 4.5:1. 5.9:1 on white, AA */
  --c-wellness:     #67AD6F;  /* Icon fills, tinted section backgrounds only. ~2.7:1, NEVER text */
  --c-orange:       #F28B3C;  /* Accent only. If used as a button fill, label must be near-black */
  --c-gold:         #F5C34D;  /* Highlight strokes, badges with dark text only. NEVER text or light-label fill */
  --c-sand:         #EAD9BE;  /* Section backgrounds, cards */
  --c-white:        #FFFFFF;

  /* ---- Neutrals (not owner-specified; added for accessibility.
         Deliberately not pure black, harsh for readers with visual fatigue) ---- */
  --c-ink:          #1A1D21;  /* Body copy */
  --c-ink-soft:     #4A5158;  /* Secondary text. 7.4:1 on white, AA */
  --c-rule:         #D9DEE2;
  --c-tint-ocean:   #F1F6F9;  /* Derived wash, ocean at low opacity over white */
  --c-tint-aqua:    #F3F9FB;  /* The default alternating band. Lighter than sand, and aqua-keyed */
  --c-tint-sand:    #F8F2E7;  /* Used sparingly now: warmth, not a section default */

  /* ---- Focus ---- */
  --focus-ring:     #0B3D56;  /* Darkened ocean. 3.6:1 on white, 3.3:1 on sand */
  --focus-ring-dark:#F5C34D;  /* Gold. 3.8:1 on ocean, 10.3:1 on ink, for dark surfaces */

  /* ---- Typography ---- */
  --font-head: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-body:      1.1875rem; /* Source Sans 3 has a smaller x-height than Inter; 19px holds the 18px floor visually */
  --fs-lead:      1.25rem;
  --fs-small:     1rem;      /* never below 16px */
  --fs-h1:        2.75rem;   /* 44px cap desktop, brief §3, not exceeded */
  --fs-h2:        2rem;
  --fs-h3:        1.375rem;
  --fs-label:     .78125rem; /* small-caps editorial label */
  --track-label:  .14em;
  --track-display:-.015em;
  --lh-body:      1.65;
  --lh-head:      1.18;

  /* ---- Layout ---- */
  --w-page:       1140px;    /* max content width */
  --w-text:       680px;     /* max text column */
  --measure:      68ch;      /* 65–70ch target */
  --gutter:       1.25rem;
  --radius:       3px;       /* was 16px, see DESIGN-NOTES, deliberate §3 deviation */
  --radius-sm:    2px;
  --radius-lg:    10px;      /* photographs and content cards. Modest on purpose. */
  --tap:          48px;      /* tap target floor (SC 2.5.8 asks 24px; we build to 48px) */
  /* Elevation is a focal device, not a default. Structure comes from hairlines
     and tinted fields; exactly one element per view may lift. */
  --hairline:     1px solid var(--c-rule);
  --shadow-lift:  0 2px 4px rgba(26,29,33,.04), 0 12px 32px rgba(26,29,33,.09);
  --c-paper:      #FFFFFF;   /* White, as the brief specifies. Warmth comes from the
                                accents and the occasional sand band, not from the page. */

  --space-section: clamp(4rem, 8vw, 7.5rem);
}

@media (max-width: 40rem) {
  :root {
    --fs-h1: 1.875rem;  /* 30px cap mobile, brief §3 */
    --fs-h2: 1.5rem;
    --fs-h3: 1.1875rem;
  }
}

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

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;          /* no weights under 400, brief §3 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  color: var(--c-ocean);
  font-weight: 600;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); }
h2 { letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.15em; }

a { color: var(--c-ocean); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

/* Visible focus ring, 2px min, >=3:1, brief §9 */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }

code, samp, kbd { font-size: .92em; overflow-wrap: anywhere; word-break: break-word; }

/* Respect reduced motion, no autoplay, no parallax, no auto-advance anywhere on this site */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Shared utilities ---- */
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--w-text); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 200; background: var(--c-ocean); color: var(--c-white);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---- Buttons. Primary is ocean + white label, sitewide (brief §3) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); min-width: var(--tap);
  padding: .8rem 1.6rem;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.01em;  /* 16px label floor */
  border-radius: var(--radius-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn + .btn { margin-left: .5rem; }  /* 8px between adjacent targets */

.btn--primary   { background: var(--c-ocean); color: var(--c-white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transition: background-color .2s ease, box-shadow .25s ease; }
.btn--primary:focus-visible, .btn--primary:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.btn--primary:hover   { background: #17506F; }
.btn--secondary { background: var(--c-botanical); color: var(--c-white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.btn--secondary:hover { background: #115B3A; }
.btn--ghost     { background: transparent; color: var(--c-ocean); border-color: var(--c-ocean); }
.btn--primary, .btn--secondary { border-color: transparent; }
.btn--ghost:hover { background: var(--c-tint-ocean); }
/* Orange fill is permitted ONLY with a near-black label, brief §3 */
.btn--accent    { background: var(--c-orange); color: var(--c-ink); }