/* ============================================================= KENTS PHARMACY — DESIGN TOKENS Prefixed --kp- throughout. The palette is sampled from the building, not invented. The 1894 shopfront is deep slate-teal woodwork (#002020–#203030) against warm Victorian brick and gilded signwriting (#604030–#805040). The existing brand colour #233A42 already sits in that first family — it is kept, and the missing warm half is restored. Every contrast figure below is computed, not estimated. See design-system.html, which recomputes them from these values at runtime, so the documentation cannot drift from the tokens. ============================================================= */ :root { /* --------------------------------------------------------- SLATE — hue 196. The brand colour and the chrome. 700 is the existing #233A42, kept deliberately. --------------------------------------------------------- */ --kp-slate-950: #0c1518; --kp-slate-900: #152328; /* footer */ --kp-slate-800: #1c2f35; --kp-slate-700: #233a42; /* BRAND — 11.96:1 on white, white text OK */ --kp-slate-600: #2f4b56; /* button hover */ --kp-slate-500: #3d6371; --kp-slate-400: #57808e; /* 4.30:1 — large text only */ --kp-slate-300: #89a8b3; /* decorative, never text on white */ --kp-slate-200: #becfd5; /* borders on dark */ --kp-slate-100: #dce6ea; --kp-slate-50: #f0f5f7; /* alternating section band */ --kp-brand: var(--kp-slate-700); /* --------------------------------------------------------- BRASS — hue 38. The accent the old site never had. THE RULE: brass 500 is 3.09:1 on white. It can NEVER carry white text and is never a primary button. It is a fill with ink text (5.76:1), a rule, an underline, a price mark. Where brass TEXT is needed on white, use 700 (6.66:1). --------------------------------------------------------- */ --kp-brass-900: #3d2b0a; --kp-brass-800: #5b4010; --kp-brass-700: #7b5514; /* the only brass safe as text on white */ --kp-brass-600: #9a6c1d; /* 4.63:1 — passes AA for body text */ --kp-brass-500: #be892d; /* ACCENT fill — dark text only */ --kp-brass-400: #dba74d; --kp-brass-300: #e8c17d; --kp-brass-200: #f4dcb4; --kp-brass-100: #faedd6; --kp-brass-50: #fdf8ef; /* warm band, heritage callouts */ --kp-accent: var(--kp-brass-500); /* --------------------------------------------------------- NEUTRALS — cooled very slightly toward the slate hue so greys sit with the brand rather than fighting it. --------------------------------------------------------- */ --kp-ink: #12191c; /* headings — 17.8:1 */ --kp-ink-2: #2c3a40; /* body copy — 11.0:1 */ --kp-ink-3: #4d6069; /* muted, meta — 6.6:1, still AA */ --kp-ink-4: #7d8f97; /* placeholder, disabled — decorative */ --kp-line: #dde4e7; --kp-line-soft: #eef2f4; --kp-surface: #ffffff; --kp-surface-2: #f0f5f7; /* = slate-50 */ --kp-surface-3: #fdf8ef; /* = brass-50, the warm band */ /* --------------------------------------------------------- SEMANTIC --------------------------------------------------------- */ --kp-nhs: #005eb8; /* NHS blue — 6.38:1. NHS-funded services ONLY */ --kp-nhs-bg: #eef4fb; --kp-private: #7b5514; /* brass-700 — privately funded services */ --kp-private-bg: #fdf8ef; --kp-success: #176b3f; --kp-success-bg: #eef8f2; --kp-danger: #a8232a; --kp-danger-bg: #fdf1f1; /* --------------------------------------------------------- TYPOGRAPHY Display: Fraunces — a variable serif whose heavier optical sizes echo Victorian signwriting. Used for h1/h2 and the price figures only; it is a display face, not a body face. Body/UI: Inter — best-in-class small-size legibility, which matters for eligibility criteria and dose text. The old site ran Montserrat for chrome and Source Sans Pro for both headings AND body, which is backwards — the two families were doing the least useful possible job. --------------------------------------------------------- */ --kp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --kp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fluid scale — 1.25 ratio at desktop, compressed on mobile */ --kp-t-display: clamp(2.75rem, 1.75rem + 4.4vw, 4.5rem); /* 44 → 72 */ --kp-t-h1: clamp(2.125rem,1.55rem + 2.6vw, 3.25rem); /* 34 → 52 */ --kp-t-h2: clamp(1.75rem, 1.42rem + 1.5vw, 2.5rem); /* 28 → 40 */ --kp-t-h3: clamp(1.375rem,1.23rem + 0.6vw, 1.75rem); /* 22 → 28 */ --kp-t-h4: 1.25rem; --kp-t-lg: 1.125rem; --kp-t-base: 1rem; --kp-t-sm: 0.875rem; --kp-t-xs: 0.75rem; --kp-lh-tight: 1.08; --kp-lh-snug: 1.24; --kp-lh-base: 1.6; --kp-lh-loose: 1.75; --kp-ls-tight: -0.025em; --kp-ls-head: -0.015em; --kp-ls-wide: 0.09em; /* eyebrows, uppercase labels */ /* --------------------------------------------------------- SPACE — 4px base --------------------------------------------------------- */ --kp-s1: 4px; --kp-s2: 8px; --kp-s3: 12px; --kp-s4: 16px; --kp-s5: 24px; --kp-s6: 32px; --kp-s7: 48px; --kp-s8: 64px; --kp-s9: 96px; --kp-s10:128px; --kp-section: clamp(56px, 4vw + 32px, 96px); --kp-section-lg: clamp(72px, 6vw + 40px, 128px); --kp-wrap: 1240px; --kp-wrap-narrow: 760px; --kp-gutter: clamp(20px, 5vw, 40px); /* --------------------------------------------------------- RADIUS / ELEVATION / MOTION Radii are deliberately restrained. Heavily rounded corners read as consumer-app; this is a 130-year-old pharmacy. --------------------------------------------------------- */ --kp-r-sm: 4px; --kp-r: 8px; --kp-r-lg: 14px; --kp-r-full: 999px; --kp-shadow-sm: 0 1px 2px rgba(18,25,28,.06), 0 1px 3px rgba(18,25,28,.05); --kp-shadow: 0 2px 4px rgba(18,25,28,.05), 0 6px 16px rgba(18,25,28,.07); --kp-shadow-lg: 0 4px 8px rgba(18,25,28,.05), 0 16px 40px rgba(18,25,28,.11); --kp-ease: cubic-bezier(.22,.61,.36,1); --kp-fast: 140ms; --kp-slow: 320ms; --kp-header-h: 92px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }