/* ==========================================================================
   Seacoast NHIC - design tokens
   --------------------------------------------------------------------------
   Loaded on EVERY page, including the 36 legacy WordPress pages.

   CRITICAL: this file contains ONLY :root custom properties and @font-face
   rules. It must never gain an element or class selector, because a selector
   here could collide with the legacy theme stylesheet
   (wp-content/themes/bmwl_theme_wp/style.css, ~89KB, 153 !important rules)
   which still styles the body of every page except the redesigned ones.
   Custom properties cannot collide; selectors can.

   Palette derivation: the logo (wp-content/uploads/2024/02/logo_seacoast_nat.png)
   contains NO green - its wordmark is deep indigo #28245F and its sunburst is
   warm gold #FDCC6A, over 56% pure white. The green scale below is therefore a
   NEW brand axis, chosen at hue ~158 with low chroma so it reads as a sibling
   of the indigo (both low-luminance and cool) rather than clashing with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts - self-hosted variable, latin subset.

   Deliberately NOT Adobe Typekit. The legacy pages load
   https://use.typekit.net/tej3wfr.css, which is a render-blocking third-party
   request against the previous site owner's Adobe account: if that kit is ever
   deleted or the account lapses, every page silently loses its typeface. Legacy
   pages keep Typekit (they set font-family:"verdana-pro" globally and would look
   broken without it); redesigned pages use these two faces instead.

   Source Serif 4 for headings - a low-contrast transitional text serif that
   reads editorial and academic, which is the "education over prescription"
   brand theme. A high-contrast didone would read spa.
   Inter for body and UI - large x-height, excellent at 15-18px, and real
   tabular figures for the office-hours lists.
   Both SIL OFL.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand anchors ──────────────────────────────────────────────────────
     Sampled from the logo's pixel histogram. RESERVED - never restyle the
     logo with these; they exist so accents can be tuned against it. */
  --sn-logo-indigo: #28245f;
  --sn-logo-gold: #fdcc6a;

  /* ── Green scale ────────────────────────────────────────────────────────
     Contrast ratios noted where the value carries text. */
  --sn-green-50: #f2f7f3;
  --sn-green-100: #e8f0ea;
  --sn-green-200: #d3e2d8; /* hairlines on green surfaces */
  --sn-green-300: #b4cdbc;
  --sn-green-600: #3e7a62; /* 4.83:1 on cream-50 - ICON STROKES / LARGE TEXT ONLY */
  --sn-green-700: #2f5d4a; /* PRIMARY CTA. white on it = 7.54:1 */
  --sn-green-800: #23483a; /* CTA hover/active. white on it = 10.2:1 */
  --sn-green-900: #1f3a30; /* dark section bg. white on it = 12.31:1 */

  /* ── Off-white / warm neutrals ──────────────────────────────────────── */
  --sn-cream-50: #fbfaf7; /* page background */
  --sn-cream-100: #f5f2ec; /* alt section bg - echoes the legacy #f7f2ed */
  --sn-warm-200: #e7e2d9; /* hairlines on cream */
  --sn-warm-400: #b8b1a7;
  --sn-warm-700: #6b655d;

  /* ── Text ───────────────────────────────────────────────────────────── */
  --sn-ink: #16241f; /* headings - 15.4:1 on cream-50 */
  --sn-text: #3f4a45; /* body - 8.84:1 */
  --sn-text-muted: #5f6963; /* microcopy - 5.46:1, passes AA */
  --sn-on-dark: #ffffff; /* 16.08:1 on --sn-ink */
  --sn-on-dark-mut: #c9d6ce; /* 10.71:1 on --sn-ink */

  /* ── Feedback ───────────────────────────────────────────────────────── */
  --sn-error: #b3261e;
  --sn-error-bg: #fdf3f2;
  --sn-success: #1e6b3a;
  --sn-success-bg: #f1f8f3;
  --sn-warn: #8a5a12;
  --sn-warn-bg: #fdf6e8;

  /* ── Semantic aliases ───────────────────────────────────────────────────
     Component CSS uses THESE, never the raw scale above. Re-skinning for
     another clinic then means editing this block, not hunting selectors. */
  --sn-bg: var(--sn-cream-50);
  --sn-bg-alt: var(--sn-cream-100);
  --sn-bg-soft: var(--sn-green-50);
  --sn-surface: #ffffff;
  --sn-line: var(--sn-warm-200);
  --sn-line-strong: var(--sn-green-200);
  --sn-accent: var(--sn-green-700);
  --sn-accent-hover: var(--sn-green-800);
  --sn-icon: var(--sn-green-600);

  /* ── Type families ──────────────────────────────────────────────────── */
  --sn-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --sn-font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  /* ── Fluid type scale ───────────────────────────────────────────────────
     Each clamp() hits its min at 360px and its max at 1280px viewport. */
  --sn-fs-display: clamp(2.375rem, 1.837rem + 2.391vw, 3.75rem); /* 38 → 60 */
  --sn-fs-h1: clamp(2.125rem, 1.685rem + 1.957vw, 3.25rem); /*      34 → 52 */
  --sn-fs-h2: clamp(1.75rem, 1.457rem + 1.304vw, 2.5rem); /*        28 → 40 */
  --sn-fs-h3: clamp(1.375rem, 1.228rem + 0.652vw, 1.75rem); /*      22 → 28 */
  --sn-fs-h4: clamp(1.188rem, 1.114rem + 0.326vw, 1.375rem); /*     19 → 22 */
  --sn-fs-lead: clamp(1.188rem, 1.114rem + 0.326vw, 1.375rem); /*   19 → 22 */
  --sn-fs-body: clamp(1.062rem, 1.038rem + 0.109vw, 1.125rem); /*   17 → 18 */
  --sn-fs-sm: clamp(0.9375rem, 0.913rem + 0.109vw, 1rem); /*         15 → 16 */
  --sn-fs-xs: clamp(0.8125rem, 0.788rem + 0.109vw, 0.875rem); /*     13 → 14 */

  --sn-lh-tight: 1.12; /* display / h1 */
  --sn-lh-snug: 1.22; /*  h2 / h3 */
  --sn-lh-body: 1.65; /*  paragraphs - generous on purpose, "education-first" */
  --sn-ls-tight: -0.021em; /* optical correction at display sizes */
  --sn-ls-caps: 0.085em; /*   eyebrow labels */

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --sn-space-1: 0.25rem;
  --sn-space-2: 0.5rem;
  --sn-space-3: 0.75rem;
  --sn-space-4: 1rem;
  --sn-space-5: 1.5rem;
  --sn-space-6: 2rem;
  --sn-space-7: 3rem;
  --sn-space-8: 4rem;
  --sn-space-9: 6rem;
  --sn-space-10: 8rem;

  --sn-section-y: clamp(3.5rem, 2.13rem + 6.087vw, 7rem); /* 56 → 112 */
  --sn-gutter: clamp(1.25rem, 0.957rem + 1.304vw, 2rem); /*  20 → 32 */
  --sn-measure: 68ch; /* prose max width */
  --sn-container: 75rem; /* 1200px */
  --sn-container-wide: 84rem;
  --sn-container-narrow: 40rem; /* the assessment card */
  /* The header bar is deliberately WIDER than the 1200px content container so
     the logo sits hard left and the CTA hard right, per the brief. 96rem/1536px
     rather than `none`: at every common laptop width (1280, 1440, 1512, 1536)
     that is effectively edge-to-edge, while on a 4K display it stops the logo
     and the CTA drifting so far apart that they read as unrelated to the
     1200px column beneath them. */
  --sn-container-header: 96rem; /* 1536px */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --sn-r-sm: 6px;
  --sn-r-md: 10px;
  --sn-r-lg: 16px; /* cards */
  --sn-r-xl: 24px; /* hero image frame */
  --sn-r-pill: 999px;

  /* ── Shadows - green-tinted, low opacity. No glossy med-spa lifts. ──── */
  --sn-shadow-xs: 0 1px 2px rgba(22, 36, 31, 0.05);
  --sn-shadow-sm: 0 1px 3px rgba(22, 36, 31, 0.06), 0 1px 2px rgba(22, 36, 31, 0.04);
  --sn-shadow-md: 0 4px 12px rgba(22, 36, 31, 0.07), 0 1px 3px rgba(22, 36, 31, 0.05);
  --sn-shadow-lg: 0 12px 32px rgba(22, 36, 31, 0.09), 0 2px 8px rgba(22, 36, 31, 0.05);
  --sn-shadow-cta: 0 2px 6px rgba(35, 72, 58, 0.22);

  /* Focus ring. Must clear 3:1 against BOTH --sn-surface and --sn-green-100,
     which is why it is the accent green rather than a hue borrowed from the
     logo's gold (gold on cream fails). */
  --sn-focus: var(--sn-green-700);
  --sn-ring: 0 0 0 3px rgba(47, 93, 74, 0.28);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --sn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sn-dur: 180ms;

  /* ── Stacking ───────────────────────────────────────────────────────── */
  --sn-z-header: 100;
  --sn-z-drawer: 200;

  /* Breakpoints are documented here but cannot be used in @media (custom
     properties are not valid in media queries). Kept for reference so the
     numbers live in one place:
       sm 30rem/480  ·  md 48rem/768  ·  lg 64rem/1024  ·  xl 80rem/1280
     These intentionally line up with the legacy stylesheet's 479/639/768/1023
     breakpoints so the shared header/footer never reflows at a different width
     than the legacy body content beneath it. */
}

/* Motion is a token, so honouring the OS preference is a one-line override
   that every transition in every stylesheet inherits. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sn-dur: 0ms;
  }
}