/** * Moore Health — Design Tokens (v3) * * Palette and type scale per the Visual Rescue master prompt, sections 6–7. * * Everything downstream reads these variables, so a change here propagates * across the whole site. Never hardcode a hex value outside this file. * * @package MooreHealth */ :root { /* --------------------------------------------------------------- * Colour — core palette (master prompt §6) * --------------------------------------------------------------- */ --mh-navy: #081b2c; /* Deep Navy */ --mh-blue: #165dff; /* Primary Blue */ --mh-blue-bright: #3b82f6; /* Bright Blue */ --mh-blue-light: #dceaff; /* Light Blue */ --mh-mist: #eef5ff; /* Mist */ --mh-warm-white: #fbfaf7; /* Warm White */ --mh-pure-white: #ffffff; /* Pure White */ --mh-stone: #eae5de; /* Soft Stone */ --mh-ink: #101c2a; /* Ink */ --mh-slate: #536475; /* Slate */ --mh-border: #d7e0ea; /* Border */ --mh-muted: #a8b8c7; /* Muted Blue Grey */ --mh-success: #1b7a57; --mh-warning: #a96516; --mh-error: #b42318; /* * Interaction shades derived from Primary Blue. Press is darkened so the * button has a real state change rather than an opacity shift. */ --mh-blue-press: #0f47c9; --mh-blue-glow: rgba(22, 93, 255, 0.18); /* Form controls need a 3:1 boundary (WCAG 1.4.11). */ --mh-border-input: #7a8fa6; --mh-placeholder: #5f7285; /* --------------------------------------------------------------- * Colour — branch accents (§6) * --------------------------------------------------------------- */ --mh-men-accent: #16738d; --mh-men-pale: #dceff3; --mh-her-accent: #6957c5; --mh-her-pale: #ece9fa; /* Active accent, swapped per section by the branch classes below. */ --mh-accent: #165dff; --mh-accent-pale: #dceaff; /* --------------------------------------------------------------- * Colour — semantic assignments * --------------------------------------------------------------- */ --mh-bg: var(--mh-warm-white); --mh-bg-alt: var(--mh-mist); --mh-bg-panel: var(--mh-blue-light); --mh-bg-warm: var(--mh-stone); --mh-bg-dark: var(--mh-navy); --mh-text: var(--mh-ink); --mh-text-body: var(--mh-slate); --mh-text-inverse: #ffffff; --mh-text-inverse-muted: #a8b8c7; --mh-link: var(--mh-blue); --mh-link-hover: var(--mh-navy); --mh-focus: var(--mh-blue); /* Legacy aliases so older component rules keep resolving. */ --mh-sky: var(--mh-blue-light); --mh-ice: var(--mh-mist); --mh-white: var(--mh-warm-white); --mh-sand: var(--mh-stone); --mh-navy-mid: #14405f; --mh-blue-clear: var(--mh-blue-bright); --mh-blue-deep: var(--mh-blue-press); --mh-border-strong: #bccbd9; /* --------------------------------------------------------------- * Gradients — used sparingly, never behind every section * --------------------------------------------------------------- */ --mh-gradient-navy: linear-gradient(135deg, #081b2c 0%, #0d2c47 55%, #14405f 100%); --mh-gradient-hero: radial-gradient(110% 80% at 82% 8%, rgba(22, 93, 255, 0.08) 0%, rgba(238, 245, 255, 0.7) 34%, rgba(251, 250, 247, 0) 70%); /* --------------------------------------------------------------- * Typography (§7) * --------------------------------------------------------------- */ --mh-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --mh-font-body: "Inter", system-ui, -apple-system, sans-serif; --mh-weight-regular: 400; --mh-weight-display: 800; --mh-weight-medium: 500; --mh-weight-semibold: 600; --mh-weight-bold: 700; --mh-size-h1: clamp(2.75rem, 6.5vw, 6.6rem); --mh-size-h2: clamp(2.1rem, 4.6vw, 4.4rem); --mh-size-h3: clamp(1.5rem, 2.3vw, 2.2rem); --mh-size-h4: clamp(1.125rem, 1.4vw, 1.35rem); --mh-size-display: clamp(3rem, 7vw, 7rem); --mh-size-display-xl: clamp(3.5rem, 9vw, 9rem); --mh-size-body-lg: clamp(1.15rem, 1.5vw, 1.4rem); --mh-size-body: 1.0625rem; --mh-size-small: 0.9375rem; --mh-size-label: 0.8125rem; --mh-leading-h1: 0.98; --mh-leading-h2: 1.05; --mh-leading-h3: 1.15; --mh-leading-display: 0.95; --mh-leading-display-xl: 0.92; --mh-leading-body-lg: 1.6; --mh-leading-body: 1.7; --mh-leading-small: 1.55; --mh-leading-label: 1.3; --mh-tracking-h1: -0.04em; --mh-tracking-h2: -0.03em; --mh-tracking-display: -0.05em; --mh-tracking-display-xl: -0.055em; --mh-tracking-label: 0.12em; /* --------------------------------------------------------------- * Space * --------------------------------------------------------------- */ --mh-space-1: 0.5rem; --mh-space-2: 0.75rem; --mh-space-3: 1rem; --mh-space-4: 1.5rem; --mh-space-5: 2rem; --mh-space-6: 3rem; --mh-space-7: 4rem; --mh-space-8: 6rem; --mh-space-9: 8rem; --mh-space-10: 10rem; /* Section spacing: 56–80 mobile, 80–112 tablet, 100–160 desktop (§8). */ --mh-section-y: clamp(3.5rem, 8.5vw, 10rem); --mh-section-y-tight: clamp(2.5rem, 5vw, 5.5rem); --mh-section-y-loose: clamp(4.5rem, 11vw, 12rem); /* --------------------------------------------------------------- * Layout (§8) * --------------------------------------------------------------- */ --mh-container: 80rem; /* 1280px */ --mh-container-wide: 90rem; /* 1440px */ --mh-measure: 45rem; /* 720px editorial */ --mh-measure-narrow: 37.5rem; /* 600px */ --mh-measure-form: 42.5rem; /* 680px */ --mh-gutter: 1.25rem; --mh-header-height: 68px; /* --------------------------------------------------------------- * Radius — one system, applied consistently * --------------------------------------------------------------- */ --mh-radius-sm: 0.5rem; --mh-radius: 0.875rem; --mh-radius-lg: 1.5rem; --mh-radius-xl: 2rem; --mh-radius-pill: 999px; /* --------------------------------------------------------------- * Elevation — layered, not one soft blur * --------------------------------------------------------------- */ --mh-shadow-sm: 0 1px 2px rgba(8, 27, 44, 0.05), 0 2px 8px rgba(8, 27, 44, 0.04); --mh-shadow: 0 1px 2px rgba(8, 27, 44, 0.05), 0 10px 28px rgba(8, 27, 44, 0.07), 0 28px 64px rgba(8, 27, 44, 0.05); --mh-shadow-hover: 0 2px 4px rgba(8, 27, 44, 0.07), 0 18px 44px rgba(8, 27, 44, 0.10), 0 40px 88px rgba(8, 27, 44, 0.08); --mh-shadow-lift: 0 34px 80px rgba(8, 27, 44, 0.18), 0 10px 24px rgba(8, 27, 44, 0.08); --mh-ring: inset 0 0 0 1px rgba(8, 27, 44, 0.07); --mh-ring-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.10); /* --------------------------------------------------------------- * Motion * --------------------------------------------------------------- */ --mh-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mh-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mh-duration-fast: 180ms; --mh-duration: 240ms; --mh-duration-slow: 420ms; /* --------------------------------------------------------------- * Controls (§28) * --------------------------------------------------------------- */ --mh-control-height: 52px; --mh-control-height-lg: 58px; --mh-tap-target: 44px; --mh-z-announcement: 30; --mh-z-header: 40; --mh-z-mobile-nav: 50; --mh-z-skip-link: 60; } @media (min-width: 720px) { :root { --mh-gutter: 2rem; --mh-header-height: 76px; } } @media (min-width: 960px) { :root { --mh-gutter: 3rem; --mh-header-height: 88px; } } .mh-branch--men { --mh-accent: var(--mh-men-accent); --mh-accent-pale: var(--mh-men-pale); } .mh-branch--her { --mh-accent: var(--mh-her-accent); --mh-accent-pale: var(--mh-her-pale); }