/* ==========================================================================
   PrescribedRx — design tokens
   Every value here is taken from the design canvas. Nothing in the theme
   hard-codes a colour, a radius or a type size: it references a token, so the
   whole site moves together when one of these changes.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --prx-navy:        #003266; /* primary. text, headings, dark panels        */
  --prx-navy-deep:   #00254D; /* announcement bar, footer                    */
  --prx-navy-lift:   #0A4A8C; /* navy button hover                           */
  --prx-red:         #D6302B; /* the single action colour. buttons, accents  */
  --prx-red-deep:    #B3241F; /* red button hover                            */
  --prx-red-pale:    #FFE3E1; /* red tint backgrounds                        */

  /* ---- Neutrals --------------------------------------------------------- */
  --prx-page:        #F5F7FA; /* page background                             */
  --prx-surface:     #FFFFFF; /* cards, rails, tables                        */
  --prx-surface-alt: #E6EBF2; /* tags, table headers, placeholders           */
  --prx-line:        #DCE2EA; /* every hairline on the site                  */
  --prx-line-soft:   #CBD3DE;
  --prx-line-dash:   #B7C2D0;

  /* ---- Type colours ----------------------------------------------------- */
  --prx-ink:         #003266; /* headings, strong text                       */
  --prx-body:        #26384D; /* long-form body copy                         */
  --prx-muted:       #4F5D6E; /* secondary copy                              */
  --prx-faint:       #8593A6; /* struck prices, captions                     */

  /* ---- On-navy ---------------------------------------------------------- */
  --prx-on-navy:       #FFFFFF;
  --prx-on-navy-soft:  #C9D6E6;
  --prx-on-navy-muted: #A9BAD0;
  --prx-on-navy-faint: #7C93B0;
  --prx-on-navy-rule:  rgba(255, 255, 255, 0.18);

  /* ---- Typefaces -------------------------------------------------------- */
  --prx-font:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --prx-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --prx-wordmark: 'Bricolage Grotesque', 'Instrument Sans', Helvetica, Arial, sans-serif;
  --prx-accent-ink: #2B5A94; /* italic accent words in headlines          */
  --prx-tint:       #F2F5F9; /* soft panels on the white page              */

  /* ---- Type scale ------------------------------------------------------- *
   * Display sizes are fluid: they hit the phone value at 390px and the
   * desktop value at 1440px, so the two comps are the two ends of one ramp
   * rather than two separate designs.                                       */
  --prx-h1:    clamp(2.00rem, 1.05rem + 3.90vw, 5.25rem); /*  32 -> 84 */
  --prx-h2:    clamp(1.75rem, 1.29rem + 1.90vw, 3.25rem); /*  28 -> 52 */
  --prx-h3:    clamp(1.375rem, 1.17rem + 0.83vw, 2.125rem); /* 22 -> 34 */
  --prx-h4:    clamp(1.25rem, 1.14rem + 0.45vw, 1.75rem);  /*  20 -> 28 */
  --prx-price: clamp(1.75rem, 1.44rem + 1.30vw, 2.75rem);  /*  28 -> 44 */

  --prx-text-xs:  0.75rem;   /* 12 — fine print, struck prices   */
  --prx-text-sm:  0.8125rem; /* 13 — captions, eyebrows          */
  --prx-text-md:  0.9375rem; /* 15 — the workhorse size          */
  --prx-text-lg:  1rem;      /* 16 — buttons, list items         */
  --prx-text-xl:  1.0625rem; /* 17 — intros on phone             */
  --prx-text-2xl: 1.1875rem; /* 19 — section intros on desktop   */
  --prx-prose:    1.125rem;  /* 18 — long-form body              */

  /* ---- Rhythm ----------------------------------------------------------- */
  --prx-lh-tight: 1.02;
  --prx-lh-snug:  1.35;
  --prx-lh-base:  1.5;
  --prx-lh-prose: 1.7;
  --prx-track-display: -0.025em;
  --prx-track-caps:     0.12em;

  /* ---- Space ------------------------------------------------------------ */
  --prx-space-1: 4px;
  --prx-space-2: 8px;
  --prx-space-3: 12px;
  --prx-space-4: 16px;
  --prx-space-5: 20px;
  --prx-space-6: 24px;
  --prx-space-7: 28px;
  --prx-space-8: 32px;
  --prx-space-10: 40px;
  --prx-space-12: 48px;
  --prx-space-14: 56px;
  --prx-space-16: 64px;
  --prx-space-20: 80px;
  --prx-space-24: 96px;

  /* Section rhythm and page gutter both collapse on small screens. */
  --prx-section: clamp(3rem, 1.6rem + 5.7vw, 6rem);  /* 48 -> 96 */
  --prx-gutter:  clamp(1.25rem, 0.3rem + 3.9vw, 5rem); /* 20 -> 80 */
  --prx-max:     1440px;

  /* ---- Radii ------------------------------------------------------------ */
  --prx-r-sm:   6px;
  --prx-r-md:  12px;
  --prx-r-lg:  16px;
  --prx-r-xl:  20px;
  --prx-r-2xl: 24px;
  --prx-r-3xl: 28px;
  --prx-r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --prx-shadow-card:  0 12px 32px rgba(0, 50, 102, 0.12);
  --prx-shadow-rail:  0 2px 10px rgba(0, 50, 102, 0.06);
  --prx-shadow-sticky: 0 -6px 20px rgba(0, 50, 102, 0.10);

  /* ---- Controls --------------------------------------------------------- */
  --prx-btn-h:    52px;
  --prx-btn-h-lg: 58px;
  --prx-focus:    var(--prx-red);
}

/* Touch targets never drop below 44px on a phone, whatever the comp says. */
@media (max-width: 767px) {
  :root {
    --prx-btn-h: 48px;
    --prx-btn-h-lg: 54px;
  }
}

/* ==========================================================================
   Self-hosted type. No third-party font request leaves the page, which keeps
   a health site's page loads free of outside calls.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/wp-content/uploads/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'),
       url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/wp-content/uploads/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'),
       url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}