/* =============================================================
   DOORSTEP PHARMACY — DESIGN TOKENS
   Every value here maps to an Elementor Global Colour / Global Font.
   Token names are prefixed --dp- to avoid collision with theme CSS.
   ============================================================= */

:root {

  /* ---------------------------------------------------------
     BRAND — taken from the logo, not from the live sites.
     The live sites drifted to #39005e; the logo is #530d7b.
     --------------------------------------------------------- */
  --dp-purple:        #530d7b;   /* PRIMARY   — 12.3:1 on white, white text OK */
  --dp-green:         #65cd00;   /* ACCENT    —  2.0:1 on white, DARK text ONLY */

  /* Purple ramp (hue 278) */
  --dp-purple-950:    #1b0428;
  --dp-purple-900:    #2a0740;
  --dp-purple-800:    #39005e;   /* legacy brand deep — footers, overlays */
  --dp-purple-700:    #530d7b;   /* = --dp-purple */
  --dp-purple-600:    #661a94;
  --dp-purple-500:    #7c2fae;
  --dp-purple-400:    #9a5cc4;
  --dp-purple-300:    #b98edb;
  --dp-purple-200:    #d7c2ec;
  --dp-purple-100:    #ece1f6;
  --dp-purple-50:     #f7f2fb;

  /* Green ramp (hue 90) */
  --dp-green-700:     #3d7a00;   /* the only green safe for text on white (4.9:1) */
  --dp-green-600:     #4fa300;
  --dp-green-500:     #65cd00;   /* = --dp-green */
  --dp-green-400:     #86e02e;
  --dp-green-300:     #a8ec66;
  --dp-green-200:     #cbf5a3;
  --dp-green-100:     #e6fad2;
  --dp-green-50:      #f4fde9;

  /* ---------------------------------------------------------
     NEUTRALS — very slightly purple-tinted so greys sit with brand
     --------------------------------------------------------- */
  --dp-ink:           #1a1523;   /* headings, primary text */
  --dp-ink-2:         #453d52;   /* body copy */
  --dp-ink-3:         #6b6377;   /* muted, captions, meta */
  --dp-ink-4:         #948da0;   /* placeholder, disabled */

  --dp-line:          #e5e1ea;   /* borders */
  --dp-line-soft:     #f0edf4;   /* hairlines, table rules */

  --dp-surface:       #ffffff;
  --dp-surface-2:     #faf9fc;   /* alternating section band */
  --dp-surface-3:     #f4f2f7;   /* input fills, inset panels */

  /* ---------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------- */
  --dp-success:       #3d7a00;
  --dp-success-bg:    #f4fde9;
  --dp-danger:        #c0272d;
  --dp-danger-bg:     #fdf1f1;
  --dp-info:          #530d7b;
  --dp-info-bg:       #f7f2fb;

  /* P-MEDICINE signal — deliberately NOT brand purple or green, so a
     pharmacy-only medicine never reads as a normal promoted product. */
  --dp-pmed:          #a35a00;
  --dp-pmed-strong:   #7a4300;
  --dp-pmed-bg:       #fff6e8;
  --dp-pmed-line:     #f0d9b5;

  /* NHS blue — for NHS-funded service blocks only (Pharmacy First etc.) */
  --dp-nhs:           #005eb8;
  --dp-nhs-bg:        #eef4fb;

  /* ---------------------------------------------------------
     TYPOGRAPHY
     Headings: Plus Jakarta Sans — friendly geometric, modern
               healthcare, distinctive without being fashionable.
     Body:     Inter — best-in-class small-size legibility, which
               matters for dosage text, ingredients and pack sizes.
     --------------------------------------------------------- */
  --dp-font-head: 'Doorstep Head', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dp-font-body: 'Doorstep Body', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — 1.25 ratio at desktop, compressed on mobile */
  --dp-t-display: clamp(2.5rem,  1.70rem + 3.6vw, 4.00rem);   /* 40 → 64 */
  --dp-t-h1:      clamp(2.00rem, 1.52rem + 2.2vw, 3.00rem);   /* 32 → 48 */
  --dp-t-h2:      clamp(1.625rem,1.33rem + 1.3vw, 2.25rem);   /* 26 → 36 */
  --dp-t-h3:      clamp(1.375rem,1.23rem + 0.6vw, 1.75rem);   /* 22 → 28 */
  --dp-t-h4:      1.25rem;                                     /* 20 */
  --dp-t-lg:      1.125rem;                                    /* 18 */
  --dp-t-base:    1rem;                                        /* 16 */
  --dp-t-sm:      0.875rem;                                    /* 14 */
  --dp-t-xs:      0.75rem;                                     /* 12 */

  --dp-lh-tight:  1.12;
  --dp-lh-snug:   1.28;
  --dp-lh-base:   1.6;
  --dp-lh-loose:  1.75;

  --dp-ls-tight:  -0.02em;
  --dp-ls-head:   -0.015em;
  --dp-ls-wide:    0.08em;   /* eyebrows, uppercase labels */

  /* ---------------------------------------------------------
     SPACE — 4px base
     --------------------------------------------------------- */
  --dp-s1: 4px;   --dp-s2: 8px;   --dp-s3: 12px;  --dp-s4: 16px;
  --dp-s5: 24px;  --dp-s6: 32px;  --dp-s7: 48px;  --dp-s8: 64px;
  --dp-s9: 96px;  --dp-s10:128px;

  /* Vertical rhythm for full-width sections */
  --dp-section:    clamp(56px, 4vw + 32px, 96px);
  --dp-section-lg: clamp(72px, 6vw + 40px, 128px);

  /* ---------------------------------------------------------
     RADIUS / ELEVATION / MOTION
     --------------------------------------------------------- */
  --dp-r-sm:   6px;
  --dp-r:     10px;
  --dp-r-md:  14px;
  --dp-r-lg:  20px;
  --dp-r-xl:  28px;
  --dp-r-pill: 999px;

  --dp-shadow-sm: 0 1px 2px rgba(26,21,35,.06), 0 1px 3px rgba(26,21,35,.04);
  --dp-shadow:    0 2px 4px rgba(26,21,35,.04), 0 6px 16px -6px rgba(26,21,35,.12);
  --dp-shadow-md: 0 4px 8px rgba(26,21,35,.05), 0 14px 32px -12px rgba(26,21,35,.18);
  --dp-shadow-lg: 0 8px 16px rgba(26,21,35,.06), 0 28px 56px -20px rgba(26,21,35,.24);
  --dp-ring:      0 0 0 3px rgba(83,13,123,.28);   /* focus */

  --dp-ease:      cubic-bezier(.4,0,.2,1);
  --dp-fast:      .14s var(--dp-ease);
  --dp-mid:       .22s var(--dp-ease);

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --dp-maxw:      1240px;   /* Elementor container width */
  --dp-maxw-text:  68ch;    /* readable measure for prose */
  --dp-gutter:    clamp(16px, 3vw, 32px);
}