/*
 * VENDORED — DO NOT EDIT. Generated by bin/vendor-tokens.sh.
 *
 * Source: design-system/colors_and_type.css
 * Only change: the two @font-face URLs point at ../fonts/ instead of fonts/.
 *
 * AD-17 — the brand kit is the source of truth and the app carries a copy, so
 * divergence is LOUD rather than prevented. `wp mlc verify` compares this file
 * against the source on every run and on every deploy; editing it here fails.
 */
/*
 * MyLocalChemist — Colors & Type
 * ───────────────────────────────
 * Source of truth: pulled from the live Astro codebase
 *   src/styles/tokens/foundation.css
 *   src/styles/tokens/mlc-app.css
 *   src/styles/global.css (typography defaults)
 *
 * Brand: deep navy primary (#082432) + warm CTA orange (#FF6128) +
 * teal accent (#4FC8C0), set against a warm-neutral surface scale.
 *
 * Fonts:
 *   • Inter (body)         — self-hosted variable .woff2 (fonts/).
 *   • Plus Jakarta Sans    — self-hosted variable .woff2 (fonts/).
 *   In production both are served via @fontsource-variable for GDPR.
 */

/* Inter — self-hosted variable, brand file */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Plus Jakarta Sans — self-hosted variable, brand file */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
       url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Warm neutral scale ──────────────────────────────── */
  --color-neutral-50:  #F5F0EB;
  --color-neutral-100: #EDE7E1;
  --color-neutral-200: #DED6CE;
  --color-neutral-300: #C5BBB2;
  --color-neutral-400: #9B8E83;
  --color-neutral-500: #6E6259;
  --color-neutral-600: #4D4339;
  --color-neutral-700: #352E27;
  --color-neutral-800: #1E1812;
  --color-neutral-900: #082432;
  --color-neutral-950: #041520;

  /* ── Primary (deep navy) ─────────────────────────────── */
  --color-primary:        #082432;
  --color-primary-light:  #E8EEF1;
  --color-primary-hover:  #0D3345;
  --color-primary-dark:   #041520;

  /* ── Secondary (CTA orange) ──────────────────────────── */
  --color-secondary:        #FF6128;
  --color-secondary-light:  #FFE0D4;
  --color-secondary-dark:   #D4532A;

  /* ── Accent (teal) ───────────────────────────────────── */
  --color-accent:        #4FC8C0;
  --color-accent-light:  #BAEAE6;
  --color-accent-dark:   #2A9D8F;

  /* ── Trust chip interactions (hover states) ──────────── */
  --color-trust-chip-gphc-hover: #B9F0D4;  /* GPhC chip hover bg */
  --color-condition-chip-border:  #CFE2F1; /* Pharmacy First condition chip border */

  /* ── Highlight (gold) ────────────────────────────────── */
  --color-highlight:        #FDDC66;
  --color-highlight-light:  #FFF7D9;
  --color-highlight-dark:   #C9A830;

  /* ── NHS (use only on NHS-authorised contexts) ───────── */
  --color-nhs:        #005EB8;
  --color-nhs-light:  #E8F1F8;

  /* ── Private (paid services) ─────────────────────────── */
  --color-private:        #D4920B;
  --color-private-light:  #FEF7E6;
  --color-private-dark:   #8A6005;

  /* ── Additional warm neutrals (from audit) ───────────── */
  --color-neutral-65:  #E5DDD3;  /* light warm neutral badge bg (service-tag / category chip) */
  --color-neutral-150: #EBE3D9;  /* neutral chip + closed-status background */
  --color-neutral-450: #9E988A;  /* dark warm neutral metadata ink (ghost icon stroke) */

  /* ── Service card accents ────────────────────────────── */
  --color-service-card-button-bg: #FBD0BC;  /* service card button tint */

  /* ── Funding chips (how a service is paid for) ─────────
     THREE states, each with a TEXT label so meaning never rests on
     colour alone (WCAG 1.4.1):
       • NHS  — NHS-commissioned, free at point of use. The one
                sanctioned chip-scale use of the regulated NHS blue.
       • Free — free but NOT NHS-funded. Blue, but a DISTINCT blue
                from NHS (the info ramp) so it never implies NHS
                affiliation (NHS Identity Guidelines).
       • Paid — chargeable. Gold; the chip shows the PRICE as its
                label (no "Private" word needed). */
  --funding-nhs-bg:  var(--color-nhs-light);     --funding-nhs-fg:  var(--color-nhs);
  --funding-free-bg: var(--color-info-light);    --funding-free-fg: var(--color-info-dark);
  --funding-paid-bg: var(--color-private-light); --funding-paid-fg: var(--color-private-dark);
  /* Request — chargeable, price not published (D-177 amended 2026-07-31, R4). Warm
     neutral: distinct from Free, and never NHS blue on a private option. */
  --funding-request-bg: var(--color-neutral-100); --funding-request-fg: var(--color-neutral-800);

  /* ── Status ──────────────────────────────────────────── */
  --color-success-light: #D1FAE5;
  --color-success:       #059669;
  --color-success-dark:  #065F46;

  --color-warning-light: #FEF3C7;
  --color-warning:       #D97706;
  --color-warning-dark:  #92400E;

  --color-error-light: #FEE2E2;
  --color-error:       #DC2626;
  --color-error-dark:  #991B1B;

  --color-info-light: #DBEAFE;
  --color-info:       #2563EB;
  --color-info-dark:  #1E40AF;

  /* ── Surfaces ────────────────────────────────────────── */
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #F5F0EB;
  --color-surface-sunken:  #EDE7E1;

  /* ── On-dark text ────────────────────────────────────── */
  --color-on-dark-heading: #FFFFFF;
  --color-on-dark-body:    #DED6CE;
  --color-on-dark-muted:   #9B8E83;
  /* On-dark chrome, scrims and hero glows reuse the canonical --overlay-* family
     (defined below) — no parallel tokens. The hero search drop-shadow is the one
     distinct value kept here (a shadow, not an overlay colour). */
  --shadow-hero-search:    0 6px 18px rgba(0, 0, 0, 0.22);

  /* ── Category tints (one tone per category, cap 8) ─────
     Tint = a property of the CATEGORY; services inherit their parent's tone.
     Each tone is a 135° gradient: a saturated-but-light brand-native hue
     top-left → kindred near-white bottom-right. The strong value drop is
     what makes the cards feel airy. `-ink` is for icon/metadata laid on
     the tint. Funding chips (NHS / Private) are INDEPENDENT of tint — never
     drive a chip colour from a tone token. See preview/category-tints.html. */
  --tone-pharmacy-from: #B7D6E6; --tone-pharmacy-to: #EAEEEA;
  --tone-pharmacy-bg:   linear-gradient(135deg, var(--tone-pharmacy-from) 0%, var(--tone-pharmacy-to) 100%);
  --tone-pharmacy-ink:  #1F4E6A;

  --tone-vacc-from: #B5E9C5; --tone-vacc-to: #ECF1DC;
  --tone-vacc-bg:   linear-gradient(135deg, var(--tone-vacc-from) 0%, var(--tone-vacc-to) 100%);
  --tone-vacc-ink:  #2B6A3B;

  --tone-travel-from: #F9EAB5; --tone-travel-to: #FAF5EB;
  --tone-travel-bg:   linear-gradient(135deg, var(--tone-travel-from) 0%, var(--tone-travel-to) 100%);
  --tone-travel-ink:  #7A5A0A;

  --tone-ear-from: #94D8C9; --tone-ear-to: #F0F1DE;
  --tone-ear-bg:   linear-gradient(135deg, var(--tone-ear-from) 0%, var(--tone-ear-to) 100%);
  --tone-ear-ink:  #1F6E66;

  --tone-inject-from: #DCE2EE; --tone-inject-to: #E9E9E5;
  --tone-inject-bg:   linear-gradient(135deg, var(--tone-inject-from) 0%, var(--tone-inject-to) 100%);
  --tone-inject-ink:  #3D4769;

  --tone-wellness-from: #F6D3C5; --tone-wellness-to: #F7EDDB;
  --tone-wellness-bg:   linear-gradient(135deg, var(--tone-wellness-from) 0%, var(--tone-wellness-to) 100%);
  --tone-wellness-ink:  #8A4416;

  --tone-diag-from: #D7D7D1; --tone-diag-to: #EAEAE4;
  --tone-diag-bg:   linear-gradient(135deg, var(--tone-diag-from) 0%, var(--tone-diag-to) 100%);
  --tone-diag-ink:  #4D4339;

  /* Prescriptions — the 8th tone (caps the palette). Brand-native teal,
     a kindred of --color-accent. `-ink` is a deep teal for icons/metadata
     ON the tint; small chips on the tint use NAVY text (the brand rule
     "text on teal is always navy") so capability labels never get lost. */
  --tone-rx-from: #9DDDD6; --tone-rx-to: #E7F2EC;
  --tone-rx-bg:   linear-gradient(135deg, var(--tone-rx-from) 0%, var(--tone-rx-to) 100%);
  --tone-rx-ink:  #166A62;

  /* Rx capability templates (prescription service pages) — named values, not
     nearest-existing substitutes. Routes = the ordering-methods ladder; statuses =
     the honest non-active treatments (paused / coming-soon / waitlist); sparse = the
     "nothing published yet" surface every Rx panel falls back to. NHS blue is NOT
     redefined here: genuine NHS provision uses --color-nhs. */
  --rx-route-border:         #E3EDEA;
  --rx-route-tile-bg:        #E7F5F3;
  --rx-route-tile-ink:       #12655E;
  --rx-route-primary-bg:     #F2FAF8;
  --rx-route-primary-border: #9DDDD6;
  --rx-step-num-bg:          #166A62;
  --rx-status-paused-bg:     #FBF1E0;
  --rx-status-paused-ink:    #8A5A12;
  --rx-status-soon-bg:       #E9F4F2;
  --rx-status-soon-ink:      #12655E;
  --rx-status-waitlist-bg:   #EFEEF9;
  --rx-status-waitlist-ink:  #464079;
  --rx-sparse-bg:            #F4F8F7;
  --rx-sparse-ink:           #4A5B58;

  /* ── Semantic foreground tokens ──────────────────────── */
  --fg-1: var(--color-primary);          /* headings, key text */
  --fg-2: var(--color-neutral-700);      /* body */
  --fg-3: var(--color-neutral-500);      /* secondary / supporting */
  --fg-4: var(--color-neutral-400);      /* muted / metadata */
  --fg-link: var(--color-secondary);     /* prose links */

  /* ── Border radii ────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-tile: 12px;  /* icon tiles, 42–48px square — see _handoff/DRIFT.md #3 */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;  /* the brand pill radius for buttons + badges */
  --radius-full: 9999px;

  /* ── Shadows (cool navy tint) ────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(8, 36, 50, 0.06);
  --shadow:     0 1px 3px rgba(8, 36, 50, 0.08), 0 1px 2px rgba(8, 36, 50, 0.04);
  --shadow-md:  0 4px 6px rgba(8, 36, 50, 0.08), 0 2px 4px rgba(8, 36, 50, 0.04);
  --shadow-lg:  0 10px 15px rgba(8, 36, 50, 0.08), 0 4px 6px rgba(8, 36, 50, 0.04);
  --shadow-xl:  0 20px 25px rgba(8, 36, 50, 0.12), 0 8px 10px rgba(8, 36, 50, 0.04);

  /* ── Overlay tokens (semi-transparent) ────────────────– */
  --overlay-primary-light:  rgba(8, 36, 50, 0.05);
  --overlay-primary-medium: rgba(8, 36, 50, 0.4);
  --overlay-primary-dark:   rgba(8, 36, 50, 0.55);
  --overlay-secondary-light: rgba(255, 97, 40, 0.08);
  --overlay-accent-light:   rgba(79, 200, 192, 0.10);
  --overlay-white-92pct:    rgba(255, 255, 255, 0.92);
  --overlay-white-70pct:    rgba(255, 255, 255, 0.70);
  --overlay-white-45pct:    rgba(255, 255, 255, 0.45);
  --overlay-white-15pct:    rgba(255, 255, 255, 0.15);
  --overlay-white-14pct:    rgba(255, 255, 255, 0.14);
  --overlay-white-12pct:    rgba(255, 255, 255, 0.12);
  --overlay-white-10pct:    rgba(255, 255, 255, 0.10);
  --overlay-white-6pct:     rgba(255, 255, 255, 0.06);
  --overlay-black-22pct:    rgba(0, 0, 0, 0.22);

  /* ── Spacing scale (8-point grid) — the documented scale, now tokenised so
     spacing can't drift off-grid. 4 and 12 are the half-steps. Components reference
     these, never raw px. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Exact spacing tokens (pin off-grid component values) ──────────────────
     The --space-1…24 scale above IS the 8-pt grid (value = N×4px). Components
     occasionally need a value the grid doesn't name — a 2px sub-grid nudge or an
     optical pad. Those exact values are pinned here as --space-<N>px (literally N
     pixels) so component CSS never carries a raw px and the builder never has to
     guess the "nearest step". Disambiguation: a BARE number is the grid step
     (--space-6 = 24px); a trailing `px` is the literal pixel value (--space-6px =
     6px). Prefer a grid step where one fits exactly; reach for these only for the
     off-grid value a component genuinely needs. */
  --space-1px:  1px;
  --space-2px:  2px;
  --space-3px:  3px;
  --space-5px:  5px;
  --space-6px:  6px;
  --space-7px:  7px;
  --space-9px:  9px;
  --space-10px: 10px;
  --space-11px: 11px;
  --space-13px: 13px;
  --space-14px: 14px;
  --space-15px: 15px;
  --space-18px: 18px;
  --space-20px: 20px;
  --space-22px: 22px;
  --space-26px: 26px;
  --space-28px: 28px;
  --space-30px: 30px;
  --space-36px: 36px;
  --space-40px: 40px;
  --space-44px: 44px;
  --space-46px: 46px;
  --space-56px: 56px;

  /* ── Layout ──────────────────────────────────────────── */
  --container-max: 1120px;
  --container-wide: 1240px;  /* full-page booking-rail layouts only — content + persistent rail */
  --header-height: 64px;
  /* Page edge gutter — on-grid: 32px desktop, 16px ≤720px. Defined as literal px
     (== --space-8 / --space-4) to sit alongside --container-* / --header-height as
     a spacing-kind layout token. */
  --gutter:        32px;
  --gutter-mobile: 16px;

  /* ── Typography stacks ───────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Type scale (semantic) ───────────────────────────── */
  --text-display:   2.75rem;  /* 44px — hero h1 desktop */
  --text-h1:        2.25rem;  /* 36px — page title desktop */
  --text-h2:        1.75rem;  /* 28px — section heading */
  --text-h3:        1.375rem; /* 22px — subsection */
  --text-h4:        1.0625rem;/* 17px — card titles */
  --text-lg:        1.125rem; /* 18px — large body / lede */
  --text-base:      1rem;     /* 16px — body */
  --text-sm:        0.9375rem;/* 15px — small body */
  --text-xs:        0.875rem; /* 14px — caption */
  --text-2xs:       0.8125rem;/* 13px — meta / pill */
  --text-eyebrow:   0.75rem;  /* 12px — uppercase eyebrow */

  /* ── Exact component type sizes (pin off-scale font-sizes) ─────────────────
     The semantic ramp above (--text-display…--text-eyebrow) names the heading and
     body roles. A few components use an intermediate size the semantic ramp
     doesn't name; those exact sizes are pinned here as --text-<N> (N px) so no
     component CSS carries a raw font-size px. `p` denotes a half-pixel
     (--text-14p5 = 14.5px). Use a semantic --text-* role where one matches; reach
     for these only for the off-scale size a component genuinely needs. */
  --text-10:    10px;
  --text-11:    11px;
  --text-11p5:  11.5px;
  --text-12p5:  12.5px;
  --text-13p5:  13.5px;
  --text-14p5:  14.5px;
  --text-17:    17px;
  --text-19:    19px;
  --text-20:    20px;
  --text-21:    21px;
  --text-24:    24px;
  --text-26:    26px;
  --text-30:    30px;
  --text-32:    32px;
  --text-40:    40px;

  --leading-tight:  1.2;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.7;

  --tracking-eyebrow: 0.06em;
}

/* ─────────────────────────────────────────────────────────
   Base typography (matches global.css from production)
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  color: var(--color-neutral-700);
  background-color: var(--color-surface);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

h1 { font-size: var(--text-h1); font-weight: 800; line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); font-weight: 800; }
h3 { font-size: var(--text-h3); font-weight: 700; }
h4 { font-size: var(--text-h4); font-weight: 700; }

p  { font-size: var(--text-base); color: var(--color-neutral-700); margin: 0 0 16px; }
p.lede { font-size: var(--text-lg); color: var(--color-neutral-600); line-height: var(--leading-loose); }

small, .text-xs { font-size: var(--text-xs); color: var(--color-neutral-500); }
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent);
}

a { color: var(--color-primary); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-neutral-50);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-light); color: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }