/* ==========================================================================
   PrescribedRx design tokens, v3 (October 2026)

   Source: the live WordPress theme (prescribedrx.com, theme v1.0.52) with its
   "premium" and "own type" layers already resolved, so these are the values a
   visitor actually sees. The names match the theme 1:1: a rule written for a
   quiz works on the site and the other way round.

   Load this file first, then components.css. Never hard-code a colour, radius
   or type size in a product: reference a token.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Brand: two colours, two jobs ------------------------------------- */
  --prx-navy:      #003266; /* the brand. text, headings, selected, dark panels */
  --prx-navy-deep: #00254D; /* announcement bar, footer                        */
  --prx-navy-lift: #0A4A8C; /* navy button hover                               */
  --prx-red:       #D6302B; /* the ONLY action colour. one per screen          */
  --prx-red-deep:  #B3241F; /* red button hover                                */
  --prx-red-pale:  #FFE3E1; /* alert tag background                            */
  --prx-accent-ink:#2B5A94; /* the one accent phrase in a headline             */

  /* ---- Surfaces --------------------------------------------------------- */
  --prx-page:        #FFFFFF; /* page background                              */
  --prx-surface:     #FFFFFF; /* raised white faces (plan rail, inputs)       */
  --prx-tint:        #F2F5F9; /* soft panels: cards, quiz options             */
  --prx-tint-hover:  #EAF0F6; /* tint panel under the pointer                 */
  --prx-surface-alt: #E6EBF2; /* tags, table headers, progress track          */
  --prx-line:        #DCE2EA; /* every hairline                               */
  --prx-line-soft:   #CBD3DE; /* input borders                                */
  --prx-line-dash:   #B7C2D0;

  /* ---- Type colours: navy family, never pure black or grey -------------- */
  --prx-ink:   #003266; /* headings, strong text, option labels              */
  --prx-body:  #26384D; /* long-form body                                    */
  --prx-muted: #4F5D6E; /* secondary copy, helper text                       */
  --prx-faint: #8593A6; /* struck prices, captions. never body text          */

  /* ---- 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);

  /* ---- Status (new in v3; quiet, from the navy family's temperature) ---- *
   * Used only for meaning (lab ranges, form errors, eligibility), never for
   * decoration. Errors reuse the brand red so there is still one red.       */
  --prx-ok:        #1E6B4F;
  --prx-ok-pale:   #E3F1EA;
  --prx-warn:      #8A5A00;
  --prx-warn-pale: #FBF0DA;
  --prx-error:     var(--prx-red-deep);
  --prx-error-pale:var(--prx-red-pale);

  /* ---- Typefaces -------------------------------------------------------- */
  --prx-display:  'Bricolage Grotesque', 'Instrument Sans', Helvetica, Arial, sans-serif;
  --prx-font:     'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --prx-wordmark: var(--prx-display);
  --prx-display-weight: 600;   /* one weight for every headline             */
  --prx-track-display: -0.025em;
  --prx-track-caps:     0.12em;

  /* ---- Type scale: fluid, 390px phone -> 1440px desktop ----------------- */
  --prx-h1:    clamp(2.5rem, 1.35rem + 4.6vw, 6rem);       /* 40 -> 96  marketing hero */
  --prx-h2:    clamp(2.125rem, 1.45rem + 2.8vw, 4.125rem); /* 34 -> 66  section       */
  --prx-h3:    clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);    /* 28 -> 44                */
  --prx-h4:    clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem);    /* 24 -> 34  card title    */
  --prx-q:     clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);  /* 26 -> 36  quiz question */
  --prx-price: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);       /* 32 -> 52                */

  --prx-text-xs:  0.75rem;   /* 12 fine print                      */
  --prx-text-sm:  0.8125rem; /* 13 eyebrows, labels                */
  --prx-text-md:  0.9375rem; /* 15 the workhorse                   */
  --prx-text-lg:  1rem;      /* 16 buttons, options, inputs        */
  --prx-text-xl:  1.0625rem; /* 17 intros on phone                 */
  --prx-text-2xl: 1.1875rem; /* 19 intros on desktop               */
  --prx-prose:    1.125rem;  /* 18 long-form body                  */

  --prx-lh-tight: 1.04;
  --prx-lh-snug:  1.35;
  --prx-lh-base:  1.5;
  --prx-lh-prose: 1.7;

  /* ---- Space (4px base) ------------------------------------------------- */
  --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;

  --prx-section: clamp(3.5rem, 2rem + 5vw, 6.5rem);   /* 56 -> 104 */
  --prx-gutter:  clamp(1.25rem, 0.3rem + 3.9vw, 5rem); /* 20 -> 80  */
  --prx-max:     1440px;
  --prx-flow:    560px; /* single-column flows: quiz, checkout steps, forms */

  /* ---- Radii ------------------------------------------------------------ */
  --prx-r-sm:   6px;   /* focus ring, tiny chips          */
  --prx-r-md:  12px;   /* inputs, notices                 */
  --prx-r-lg:  16px;   /* quiz options                    */
  --prx-r-xl:  20px;   /* cards                           */
  --prx-r-2xl: 24px;   /* media                           */
  --prx-r-3xl: 28px;   /* plan rail, big panels           */
  --prx-r-pill: 999px; /* every button, tags, progress    */

  /* ---- Elevation: navy-tinted, used sparingly --------------------------- */
  --prx-shadow-rail:   0 2px 10px rgba(0, 50, 102, 0.06);
  --prx-shadow-card:   0 24px 60px rgba(0, 50, 102, 0.08); /* the buy box only */
  --prx-shadow-sticky: 0 -6px 20px rgba(0, 50, 102, 0.10);

  /* ---- Controls --------------------------------------------------------- */
  --prx-btn-h:    52px;
  --prx-btn-h-lg: 58px;
  --prx-field-h:  56px;
  --prx-option-h: 64px;
  --prx-focus:    var(--prx-red);

  /* ---- Motion: only to explain a change, never decoration --------------- *
   * One curve for everything. Durations by what is changing.               */
  --prx-move: cubic-bezier(.2, .8, .2, 1);
  --prx-dur:          150ms; /* hover colour, popovers (combo, calendar)   */
  --prx-dur-select:   200ms; /* picking an option or plan; content opening */
  --prx-dur-screen:   220ms; /* quiz screen change                         */
  --prx-dur-progress: 300ms; /* progress line                              */
  --prx-dur-panel:    300ms; /* side panels and modals                     */
}

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