/* Range Pharma design tokens
 *
 * One source for the values that were previously re-declared per page. The
 * palette is not new: it is the one already in use on /compounding and
 * /careers, promoted so the Elementor-era pages, the Tailwind-built pages and
 * the hand-written pages can all read the same numbers.
 *
 * Loaded from the layout AFTER vendor/wp/* so it wins over the scraped
 * WordPress reset, and BEFORE per-page CSS so pages can still override.
 */

:root {
  /* ---- ink ---------------------------------------------------------------
   * Steps are chosen for contrast, not for looks: ink-muted is the lightest
   * value that still clears 4.5:1 on both paper and white, so "secondary
   * text" can no longer be specified into an AA failure.
   * ink        #0a1a2f on #ffffff  = 16.8:1
   * ink-body   #26313f on #ffffff  = 11.4:1
   * ink-muted  #55606f on #ffffff  =  6.1:1   (5.7:1 on --rp-paper)
   * ink-faint  #6d7784 on #ffffff  =  4.6:1   — the floor, not a default
   */
  --rp-ink: #0a1a2f;
  --rp-ink-body: #26313f;
  --rp-ink-muted: #55606f;
  --rp-ink-faint: #6d7784;

  /* ---- surfaces ---- */
  --rp-paper: #f6f3ec;
  --rp-paper-2: #efeadf;
  --rp-card: #fffdf8;
  --rp-white: #ffffff;

  /* ---- brand ----
   * Recorded brand commitment: the Range blue. Deep is the accessible one on
   * light surfaces (8.6:1); plain blue is for fills, rules and icons.
   */
  --rp-blue: #1d4ed8;
  --rp-blue-deep: #14338f;
  --rp-blue-soft: #dce6ff;
  --rp-mint: #0f766e;
  --rp-mint-soft: #d7eee9;

  /* ---- lines ---- */
  --rp-line: rgba(10, 26, 47, .14);
  --rp-line-soft: rgba(10, 26, 47, .08);
  --rp-line-hairline: #efefef;

  /* ---- roles ---- */
  --rp-link: var(--rp-blue-deep);
  --rp-focus: var(--rp-blue);

  /* ---- radii ---- */
  --rp-r-sm: 8px;
  --rp-r-md: 13px;
  --rp-r-lg: 18px;
  --rp-r-xl: 22px;
  --rp-r-pill: 100px;

  /* ---- elevation: offset + soft blur, never a zero-offset halo ---- */
  --rp-shadow-card: 0 22px 44px -28px rgba(10, 26, 47, .5);
  --rp-shadow-panel: 0 16px 32px -12px rgba(15, 23, 42, .22);
  --rp-shadow-action: 0 14px 30px -12px rgba(20, 51, 143, .6);

  /* ---- motion ---- */
  --rp-ease: cubic-bezier(.2, .7, .2, 1);
  --rp-dur-fast: .25s;
  --rp-dur: .3s;

  /* ---- type ---- */
  --rp-font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --rp-font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* --rp-font-body is declared in the layout next to its @font-face. */

  /* ---- touch ---- */
  --rp-target: 44px;
}

/* The scraped WordPress reset (vendor/wp/reset.css) sets the default link and
 * button colour to #cc3366 — a pink that belongs to no part of this brand and
 * that surfaced on every Rails-built page that did not declare a colour of its
 * own (the /dosage-reference breadcrumb, for one). Neutralised here for
 * unclassed elements only, so Elementor-classed markup keeps its own styling.
 */
a:where(:not([class])) {
  color: var(--rp-link);
}

button:where(:not([class])),
[type="button"]:where(:not([class])),
[type="submit"]:where(:not([class])),
[type="reset"]:where(:not([class])) {
  color: inherit;
  border-color: currentColor;
}

/* Keyboard focus, themed from the palette and applied once for the whole site.
 * Four vendor sheets carry `outline: none`; this restores a visible ring that
 * cannot be silently removed by them.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rp-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--rp-blue-soft);
  color: var(--rp-blue-deep);
}