/** * MDH Design Tokens — single source of truth. * * Enqueued BEFORE style.css as handle `mdh-tokens`. * * RULES * 1. Every color, font-size, space, radius and shadow in style.css must * resolve to a token defined here. * 2. Never write `var(--token, #hardcoded)`. The fallback defeats the token — * changing the token then only moves half the site. Tokens are always * defined here, so a fallback is never needed. * 3. Adding a new token is a deliberate act. Prefer reusing the nearest * existing one. If nothing fits, add it HERE, not inline. * * Derived from an audit of the existing stylesheet, so values map to what the * site already uses — this collapses variants, it does not restyle the site. */ :root { /* --------------------------------------------------------------- * BRAND * Blue is primary (chrome, links, headings, primary actions). * Green is accent (CTAs, success, highlights). * --------------------------------------------------------------- */ --color-primary: #1f6fb2; --color-primary-hover: #1a5c96; --color-primary-active: #164e80; --color-primary-subtle: rgba(31, 111, 178, 0.08); --color-primary-ring: rgba(31, 111, 178, 0.14); --color-border-ghost: rgba(15, 23, 42, 0.05); /* hairline separator between drawer items */ --color-accent: #64b856; --color-accent-hover: #4a9a3f; --color-accent-active: #3d8134; --color-accent-subtle: rgba(100, 184, 86, 0.10); --color-teal: #0f7c86; /* Legacy aliases — existing style.css references these by name. * Kept so nothing breaks during incremental migration. * Do not use in new code; migrate call sites to the names above. */ --color-primary-blue: var(--color-primary); --color-mercos-teal: var(--color-teal); --color-neutral-dark: var(--color-text); --color-light-grey-bg: var(--color-surface-alt); --color-border-grey: var(--color-border); /* --------------------------------------------------------------- * NEUTRALS — slate ramp * The theme had two competing grey systems (#333/#666/#999 and a * slate ramp). Slate wins: it is a designed, contrast-checked scale. * --------------------------------------------------------------- */ --color-slate-950: #0b1220; --color-slate-900: #0f172a; --color-slate-800: #1e293b; --color-slate-700: #334155; --color-slate-600: #475569; --color-slate-500: #64748b; --color-slate-400: #94a3b8; --color-slate-300: #cbd5e1; --color-slate-200: #e2e8f0; --color-slate-100: #f1f5f9; --color-slate-50: #f8fafc; --color-white: #ffffff; /* Semantic roles — prefer these over raw ramp steps. * Body text on --color-surface is 15.6:1 (WCAG AAA). * Muted text on --color-surface is 5.9:1 (WCAG AA). */ --color-text: var(--color-slate-900); --color-text-strong: var(--color-slate-950); --color-text-muted: var(--color-slate-600); --color-text-subtle: var(--color-slate-500); --color-text-placeholder: var(--color-slate-400); /* input placeholders and muted icons */ --color-text-invert: var(--color-white); --color-surface: var(--color-white); --color-surface-alt: var(--color-slate-50); --color-surface-sunk: var(--color-slate-100); --color-surface-dark: var(--color-slate-900); --color-border: var(--color-slate-200); --color-border-strong: var(--color-slate-300); /* A brand-tinted section wash. Cooler and more clinical than flat slate, * which suits a medical distributor. Alternate it with --color-surface to * separate full-width sections without drawing rules between them. */ --surface-wash: linear-gradient(180deg, #ebf3fa 0%, #dfeaf5 100%); /* --------------------------------------------------------------- * ON-DARK * Text and controls sitting on photography, gradients or dark bands, * where a solid neutral would look pasted on. Translucent white keeps * the surface underneath readable through it. * --------------------------------------------------------------- */ --color-on-dark: var(--color-white); --color-on-dark-muted: rgba(255, 255, 255, 0.82); --color-on-dark-surface: rgba(255, 255, 255, 0.08); --color-on-dark-surface-hover: rgba(255, 255, 255, 0.16); --color-on-dark-border: rgba(255, 255, 255, 0.45); /* Directional hero scrim: heavy behind the headline, clearing toward the * right so the photograph still reads. Slate-950 at four stops. */ --scrim-hero: linear-gradient( 100deg, rgba(11, 18, 32, 0.92) 0%, rgba(11, 18, 32, 0.72) 42%, rgba(11, 18, 32, 0.38) 72%, rgba(11, 18, 32, 0.55) 100% ); /* --------------------------------------------------------------- * STATUS * --------------------------------------------------------------- */ --color-success: #16794a; --color-warning: #b45309; --color-danger: #b42318; --color-info: var(--color-primary); /* --------------------------------------------------------------- * TYPOGRAPHY * Two families only. Declare them exactly one way. * --------------------------------------------------------------- */ --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale, base 16px. Collapses 87 ad-hoc sizes into 11 steps. */ --fs-2xs: 0.75rem; /* 12px — legal, badges */ --fs-xs: 0.8125rem; /* 13px — meta, captions */ --fs-sm: 0.875rem; /* 14px — secondary UI text */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead paragraph */ --fs-lg: 1.25rem; /* 20px — h5 / card title */ --fs-xl: 1.5rem; /* 24px — h4 */ --fs-2xl: 1.75rem; /* 28px — h3 */ --fs-3xl: 2rem; /* 32px — h2 */ --fs-4xl: 2.5rem; /* 40px — h1 */ --fs-5xl: 3rem; /* 48px — hero */ --fs-ui: 0.9375rem; /* 15px — compact UI controls, drawer items */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; /* headings */ --lh-snug: 1.4; /* subheads, card titles */ --lh-normal: 1.6; /* body */ --lh-relaxed: 1.75; /* long-form article copy */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; /* --------------------------------------------------------------- * SPACING — 4px base grid * --------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Legacy spacing aliases (were defined in a second :root block). */ --space-sm: var(--space-8); --space-md: var(--space-12); --space-lg: var(--space-16); /* Vertical rhythm for page sections. */ --section-y: var(--space-16); --section-y-mobile: var(--space-10); /* --------------------------------------------------------------- * LAYOUT * --------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; /* article measure, ~70ch */ --container-pad: var(--space-5); --header-height: 72px; /* --------------------------------------------------------------- * RADII — collapses 16 values into 6 * --------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --radius-circle: 50%; /* --------------------------------------------------------------- * ELEVATION — 4 levels, all cast in slate rather than pure black * so shadows sit in the same color family as the UI. * --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px var(--color-primary-ring); --shadow-focus-inset: inset 0 0 0 2px rgba(31, 111, 178, 0.40); /* keyboard ring for drawer items */ /* One-off composite shadows for the hero search widget. Named here so any * change requires a single edit rather than a hunt through home.css. */ --shadow-search-bar: 0 2px 8px rgba(0, 0, 0, 0.14), 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.18); --shadow-drawer: 0 4px 6px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.07); /* --------------------------------------------------------------- * GLYPHS * Inline SVG for use as a CSS `mask`, never `background-image` — a mask * takes its color from `background-color`, so the glyph stays tokenized. * --------------------------------------------------------------- */ --glyph-capsule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='4'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E"); /* --------------------------------------------------------------- * MOTION * --------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --transition-base: all var(--duration-base) var(--ease); /* --------------------------------------------------------------- * Z-INDEX — named layers stop the arms race of arbitrary numbers. * --------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-header: 1000; --z-overlay: 1500; --z-modal: 2000; --z-toast: 2500; /* --------------------------------------------------------------- * CONTROLS — touch targets. Never below 44px for interactive elements. * --------------------------------------------------------------- */ --control-height-sm: 36px; --control-height: 44px; --control-height-lg: 52px; } /** * BREAKPOINTS (documentation only — CSS variables do not work in @media). * Use exactly these four. The theme currently has 17 distinct breakpoints. * * --bp-sm: 480px phone * --bp-md: 768px tablet * --bp-lg: 992px small laptop * --bp-xl: 1200px desktop * * The existing stylesheet is desktop-first (max-width). Keep new work * consistent with the block you are editing rather than mixing directions * inside one component. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }