/* ========================================================================== MyStroke — Design Tokens -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radius and elevation. Derived from the approved mockups (add_patient_demo.html, patients_list_page.html, mystroke_redesign_modern.html), which hardcoded every value inline. Load this BEFORE any component CSS. Never hardcode a hex value in a component file — if a value is missing here, add it here first. Accessibility note: the primary audience is stroke survivors, who skew older and may have visual, motor or cognitive impairment. Base font size, line height, touch-target and contrast minimums below are deliberate. Do not lower them for visual density. ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------ */ --ms-navy: #002d5c; /* primary — headers, headings, nav */ --ms-navy-600: #004a99; /* secondary — links, diastolic series */ --ms-navy-050: #e3f2fd; /* tint — badges, quiet fills */ /* --- Brand accent (logo colour) --------------------------------------- #019fd0 is the logo cyan. It measures 3.06:1 against white, which is below the 4.5:1 WCAG AA needs for normal text, so it is deliberately split into two roles: --ms-accent decorative only — rules, bars, marks. Reads well on navy (4.49:1), better than the old red (2.76:1). --ms-accent-strong anything carrying or backing text (5.02:1 on white). Never set --ms-accent as a text colour on white, or as a background behind white text. Use --ms-accent-strong for those. */ --ms-accent: #019fd0; /* logo cyan — bars, rules, marks on navy */ --ms-accent-strong: #01789e; /* 5.02:1 on white — text + button fills */ --ms-accent-hover: #016b8f; /* 6.00:1 — hover / pressed */ --ms-accent-050: #e6f5fa; /* tint — hover surfaces */ /* Deprecated aliases. The accent is no longer red; these are kept so any stylesheet still referencing them keeps working. They point at the text-safe shade so a missed usage stays legible. Prefer --ms-accent*. */ --ms-red: var(--ms-accent-strong); --ms-red-700: var(--ms-accent-hover); --ms-red-050: var(--ms-accent-050); /* --- Neutrals --------------------------------------------------------- */ --ms-white: #ffffff; --ms-grey-050: #fafafa; --ms-grey-100: #f5f5f5; --ms-grey-200: #eeeeee; --ms-grey-300: #dddddd; --ms-grey-500: #666666; --ms-grey-800: #333333; --ms-black: #1a1a1a; /* --- Semantic --------------------------------------------------------- */ /* Status colours are paired with a text/icon label everywhere they are used. Never encode meaning in colour alone. */ --ms-success: #1b7f4b; --ms-success-bg: #e6f4ec; --ms-info: #004a99; --ms-info-bg: #e3f2fd; --ms-warning: #8a5a00; --ms-warning-bg: #fdf3e0; --ms-danger: #c62828; --ms-danger-bg: #fdecea; /* --- Surfaces --------------------------------------------------------- */ --ms-surface: var(--ms-white); --ms-surface-sunken: var(--ms-grey-100); --ms-border: var(--ms-grey-300); --ms-border-strong: var(--ms-grey-500); /* --- Typography ------------------------------------------------------- Font families are set ONLY inside .ms-portal (see patient-portal.css). Everywhere else the typeface stays owned by the theme / Customizer, so the client can still change the rest of the site in one place without touching CSS. The portal is the documented exception: the client asked (2026-08-25) for a distinct, more formal treatment on the patient page alone. The two families below are self-hosted in mystroke-fonts.css. WEIGHTS AVAILABLE — do not request one that is not vendored, or the browser synthesises it and the result looks wrong: Raleway 800-900 (variable, one file) Barlow 600, 700 (static instances, one file each) There is deliberately no Barlow 400, so Barlow is used for headings, labels and links — not for long-form body copy, which would render at 600 and read far too heavy. Form controls still need `font: inherit` (browsers default them to the system UI font), and where that appears it must be followed by an explicit font-size, since the `font` shorthand resets size. */ /* 16px base. */ --ms-text-xs: 0.75rem; /* 12px — metadata, never body copy */ --ms-text-sm: 0.875rem; /* 14px — captions, table meta */ --ms-text-base: 1rem; /* 16px — body */ --ms-text-lg: 1.125rem; /* 18px — lead paragraph */ --ms-text-xl: 1.375rem; /* 22px — card / section titles */ --ms-text-2xl: 1.75rem; /* 28px — page title */ --ms-text-3xl: 2.5rem; /* 40px — hero */ /* Patient-portal heading scale (D / T / M). The client's written spec was H2 42/38/28. In review the headers read as too heavy at that size, so H2 was taken down one step to 34/30/26. H3 is deliberately left at the spec'd 24/22/22: the video title is a legibility aid for patients who cannot read the player's own title card, so it must not shrink below it. H2 34 / 30 / 26 section headers (spec was 42 / 38 / 28) H3 24 / 22 / 22 video titles (as spec'd) Tablet/mobile steps live in patient-portal.css; these two are the desktop values. Kept here so the two files cannot drift. */ --ms-portal-h2: 2.125rem; /* 34px */ --ms-portal-h3: 1.5rem; /* 24px */ --ms-portal-blurb: 1.25rem; /* 20px — section description. Sits between --ms-text-lg and --ms-text-xl, so it has no place on the shared scale; it is a portal-specific size like the two above. */ /* Font families — portal only. */ --ms-font-display: 'Raleway', Georgia, serif; --ms-font-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --ms-leading-tight: 1.25; --ms-leading-normal: 1.6; --ms-weight-normal: 400; --ms-weight-medium: 600; --ms-weight-bold: 700; /* --- Spacing (4px scale) ---------------------------------------------- */ --ms-space-1: 0.25rem; /* 4px */ --ms-space-2: 0.5rem; /* 8px */ --ms-space-3: 0.75rem; /* 12px */ --ms-space-4: 1rem; /* 16px */ --ms-space-5: 1.5rem; /* 24px */ --ms-space-6: 2rem; /* 32px */ --ms-space-7: 3rem; /* 48px */ --ms-space-8: 4rem; /* 64px */ /* --- Radius ----------------------------------------------------------- */ --ms-radius-sm: 4px; --ms-radius-md: 8px; --ms-radius-lg: 12px; --ms-radius-pill: 999px; /* --- Elevation -------------------------------------------------------- */ --ms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ms-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --ms-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* --- Layout ----------------------------------------------------------- */ --ms-container: 1200px; --ms-container-text: 760px; /* readable measure for prose */ /* Minimum interactive target. WCAG 2.5.5 asks 44px; we do not go under it anywhere, including table row actions. */ --ms-target-min: 44px; /* --- Motion ----------------------------------------------------------- */ --ms-transition: 160ms ease; /* --- Data visualisation ----------------------------------------------- */ /* Systolic/diastolic are additionally distinguished by marker shape and a direct label, so the chart survives greyscale printing and colour vision deficiency. */ /* Systolic stays red deliberately. This is a data encoding, not branding — recolouring it to the brand cyan would put it next to the navy diastolic series and make the two lines hard to tell apart. */ --ms-chart-systolic: #d32f2f; --ms-chart-diastolic: var(--ms-navy-600); --ms-chart-grid: var(--ms-grey-200); --ms-chart-axis: var(--ms-grey-500); --ms-chart-band: #f4f8fc; /* normal-range band fill */ } /* --- Breakpoints ----------------------------------------------------------- Custom properties cannot be used in media queries, so these are documented here and must be kept in sync by hand: --ms-bp-md 768px tabs collapse, grid 3 -> 2 columns --ms-bp-sm 480px grid 2 -> 1 column -------------------------------------------------------------------------- */ /* --- Focus ----------------------------------------------------------------- A single, highly visible focus ring for every interactive element. Do not remove outlines without replacing them with this. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ms-accent-strong); outline-offset: 2px; border-radius: var(--ms-radius-sm); } /* --- Reduced motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }