/* Liberty Dayton Regional Medical Center visual playbook tokens. THE source of truth for this brand's values. Direction, not extraction (Terry, 2026-10-27): the base is the Claude homepage facelift (branch feat/pd-6rzg, claude-copy/), not the live site. Where a value is the hospital's own (logo, colour family, Poppins) the source is clients/liberty-dayton-rmc/concepts/homepage-facelift/pack/brand.md; where it is the facelift's direction the source is clients/liberty-dayton-rmc/concepts/homepage-facelift/claude-copy/index.html (FL below). Both paths are on branch feat/pd-6rzg until it merges. "pick" = a value hand-picked for this playbook, listed in playbook section 11 with who confirms it. HD = header-nav-qframe (pd-15t1.2, pd-15t1.3). Shape: frameworks/astro-code-standards.md section 2 plus the Design Standard token-defect fixes (TD1 to TD6). The only place raw hex or rgba values appear is this file (C1). This file wins. */ :root { /* Brand colours (solid). Playbook section 03. */ --ldr-primary: #006E9F; /* dominant ground and links. BR:11 */ --ldr-secondary: #2E7367; /* the hospital's green: action and the emblem's second hue. BR:14 */ --ldr-tertiary: #2E7367; /* action, CTAs only (CR3, C18). Same green as secondary: this brand has one action colour. BR:14 */ --ldr-neutral: #FFFFFF; /* light ground. BR:16 */ /* Lightness ramp (TD2, B6). Picked steps only; a step the brand does not use is not invented. */ --ldr-primary-100: #E6F6FE; /* pale blue ground. BR:15 */ --ldr-primary-200: #CFEAF8; /* pale blue, one step deeper: hover and pressed tiles. FL:22 */ --ldr-primary-500: var(--ldr-primary); --ldr-primary-600: #00577E; /* link hover, button hover, deep text on pale. FL:16 */ --ldr-primary-900: #011632; /* navy: headings and the deepest ground. BR:12 */ --ldr-secondary-500: var(--ldr-secondary); --ldr-secondary-700: #245B52; /* green hover or press. FL:20 */ --ldr-tertiary-500: var(--ldr-tertiary); --ldr-tertiary-700: var(--ldr-secondary-700); /* Grey ramp at the primary's hue (TD2). */ --ldr-grey-100: #F1F1F1; /* light grey ground. BR:16 */ --ldr-grey-200: #D7E7F0; /* hairline, blue-tinted. FL:25 */ --ldr-grey-700: #3C4959; /* body slate. BR:13 */ /* RGB helpers for the opacity scales. */ --ldr-primary-rgb: 0, 110, 159; --ldr-navy-rgb: 1, 22, 50; --ldr-neutral-rgb: 255, 255, 255; /* Opacity scales, 05 to 95 in steps of 5, defined for three colours: primary, navy and white. Overlays, scrims on photos, borders and shadows ONLY: never text, never a palette step (B5, B6, C10). */ /* primary */ --ldr-primary-05: rgba(var(--ldr-primary-rgb), 0.05); --ldr-primary-10: rgba(var(--ldr-primary-rgb), 0.10); --ldr-primary-15: rgba(var(--ldr-primary-rgb), 0.15); --ldr-primary-20: rgba(var(--ldr-primary-rgb), 0.20); --ldr-primary-25: rgba(var(--ldr-primary-rgb), 0.25); --ldr-primary-30: rgba(var(--ldr-primary-rgb), 0.30); --ldr-primary-35: rgba(var(--ldr-primary-rgb), 0.35); --ldr-primary-40: rgba(var(--ldr-primary-rgb), 0.40); --ldr-primary-45: rgba(var(--ldr-primary-rgb), 0.45); --ldr-primary-50: rgba(var(--ldr-primary-rgb), 0.50); --ldr-primary-55: rgba(var(--ldr-primary-rgb), 0.55); --ldr-primary-60: rgba(var(--ldr-primary-rgb), 0.60); --ldr-primary-65: rgba(var(--ldr-primary-rgb), 0.65); --ldr-primary-70: rgba(var(--ldr-primary-rgb), 0.70); --ldr-primary-75: rgba(var(--ldr-primary-rgb), 0.75); --ldr-primary-80: rgba(var(--ldr-primary-rgb), 0.80); --ldr-primary-85: rgba(var(--ldr-primary-rgb), 0.85); --ldr-primary-90: rgba(var(--ldr-primary-rgb), 0.90); --ldr-primary-95: rgba(var(--ldr-primary-rgb), 0.95); /* navy */ --ldr-navy-05: rgba(var(--ldr-navy-rgb), 0.05); --ldr-navy-10: rgba(var(--ldr-navy-rgb), 0.10); --ldr-navy-15: rgba(var(--ldr-navy-rgb), 0.15); --ldr-navy-20: rgba(var(--ldr-navy-rgb), 0.20); --ldr-navy-25: rgba(var(--ldr-navy-rgb), 0.25); --ldr-navy-30: rgba(var(--ldr-navy-rgb), 0.30); --ldr-navy-35: rgba(var(--ldr-navy-rgb), 0.35); --ldr-navy-40: rgba(var(--ldr-navy-rgb), 0.40); --ldr-navy-45: rgba(var(--ldr-navy-rgb), 0.45); --ldr-navy-50: rgba(var(--ldr-navy-rgb), 0.50); --ldr-navy-55: rgba(var(--ldr-navy-rgb), 0.55); --ldr-navy-60: rgba(var(--ldr-navy-rgb), 0.60); --ldr-navy-65: rgba(var(--ldr-navy-rgb), 0.65); --ldr-navy-70: rgba(var(--ldr-navy-rgb), 0.70); --ldr-navy-75: rgba(var(--ldr-navy-rgb), 0.75); --ldr-navy-80: rgba(var(--ldr-navy-rgb), 0.80); --ldr-navy-85: rgba(var(--ldr-navy-rgb), 0.85); --ldr-navy-90: rgba(var(--ldr-navy-rgb), 0.90); --ldr-navy-95: rgba(var(--ldr-navy-rgb), 0.95); /* neutral (white) */ --ldr-neutral-05: rgba(var(--ldr-neutral-rgb), 0.05); --ldr-neutral-10: rgba(var(--ldr-neutral-rgb), 0.10); --ldr-neutral-15: rgba(var(--ldr-neutral-rgb), 0.15); --ldr-neutral-20: rgba(var(--ldr-neutral-rgb), 0.20); --ldr-neutral-25: rgba(var(--ldr-neutral-rgb), 0.25); --ldr-neutral-30: rgba(var(--ldr-neutral-rgb), 0.30); --ldr-neutral-35: rgba(var(--ldr-neutral-rgb), 0.35); --ldr-neutral-40: rgba(var(--ldr-neutral-rgb), 0.40); --ldr-neutral-45: rgba(var(--ldr-neutral-rgb), 0.45); --ldr-neutral-50: rgba(var(--ldr-neutral-rgb), 0.50); --ldr-neutral-55: rgba(var(--ldr-neutral-rgb), 0.55); --ldr-neutral-60: rgba(var(--ldr-neutral-rgb), 0.60); --ldr-neutral-65: rgba(var(--ldr-neutral-rgb), 0.65); --ldr-neutral-70: rgba(var(--ldr-neutral-rgb), 0.70); --ldr-neutral-75: rgba(var(--ldr-neutral-rgb), 0.75); --ldr-neutral-80: rgba(var(--ldr-neutral-rgb), 0.80); --ldr-neutral-85: rgba(var(--ldr-neutral-rgb), 0.85); --ldr-neutral-90: rgba(var(--ldr-neutral-rgb), 0.90); --ldr-neutral-95: rgba(var(--ldr-neutral-rgb), 0.95); /* Semantic text tokens. Contrast recorded in playbook section 03 (C8, C9). */ --ldr-text-on-dark: #FFFFFF; /* body on primary or navy. FL:23 */ --ldr-text-on-light: #3C4959; /* body on white, pale, grey. BR:13 */ --ldr-text-heading: #011632; /* headings on light. BR:12 */ --ldr-text-muted-dark: #E6F6FE; /* picked at the ground's hue, never white at opacity (TD3, B5). FL:111 */ --ldr-text-muted-light: #3C4959; /* the slate is already the quiet text; no lighter grey passes on pale. BR:13 */ /* Semantic role aliases. Components and treatments use roles, never raw colour tokens. */ --bg-primary: var(--ldr-primary); --bg-deep: var(--ldr-primary-900); --bg-light: var(--ldr-neutral); --bg-pale: var(--ldr-primary-100); --bg-soft: var(--ldr-grey-100); --fg-on-dark: var(--ldr-neutral); --fg-on-dark-body: var(--ldr-text-on-dark); --fg-on-dark-muted: var(--ldr-text-muted-dark); --fg-on-light: var(--ldr-text-heading); --fg-on-light-body: var(--ldr-text-on-light); --fg-on-light-muted: var(--ldr-text-muted-light); --fg-link: var(--ldr-primary); --fg-link-hover: var(--ldr-primary-600); --accent: var(--ldr-primary-600); /* the eyebrow dash and small marks. Green is action only, on light grounds: playbook 03.1, decision 1 (ruled by Felicia, 2026-11-01) */ --action: var(--ldr-tertiary); --action-pressed: var(--ldr-tertiary-700); --border-subtle: var(--ldr-grey-200); --bg-scrim: var(--ldr-navy-55); /* photo grade under text, playbook 06.1. FL:218 */ /* Fonts. Playbook section 04. Two families at most (C13); this brand ships one. Google Fonts, as the live site does. */ --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* BR:20, FL:34 */ --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* BR:20, FL:34 */ --font-email: Poppins, Arial, Helvetica, sans-serif; /* email stack: web fonts rarely load in mail, so it ends in Arial. pick, playbook 04.4 */ --fw-body: 400; --fw-medium: 500; /* lead paragraph. FL:270 */ --fw-strong: 600; /* h3, eyebrow, buttons. FL:81, FL:106 */ --fw-display: 700; /* h1, h2: never 400 (C12, B13). FL:81 */ /* Type scale. Every adjacent pair differs by at least 15 percent at 390, 768, 1024, 1440 and 1920 (C3, TD5). h3 and body-lg are raised from the facelift's 22 and 19px, which sat 16 and 12 percent from their neighbours (pick, section 11). */ --fs-h1: clamp(2.375rem, 1.4rem + 3.2vw, 3.75rem); /* 38 to 60. FL:41 */ --fs-h2: clamp(1.875rem, 1.2rem + 1.9vw, 2.625rem); /* 30 to 42. FL:40 */ --fs-h3: 1.5rem; /* 24. pick, FL:39 was 1.375rem */ --fs-body-lg: 1.25rem; /* 20. pick, FL:38 was 1.1875rem */ --fs-body: 1.0625rem; /* 17. FL:37 */ --fs-body-sm: 0.9375rem; /* 15. FL:36 */ --fs-eyebrow: 0.8125rem; /* 13. FL:35 */ --fs-hero-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); /* 40 to 72. The home page's h1 ONLY (it replaces --fs-h1 there; no other page uses it, so it is never beside --fs-h1). h2 stays 33 percent or more below it at every width. HD hero.css:12, approved 2026-10-31 */ --fs-button: var(--fs-body); /* 17. Button label at body size, larger than Borg's 13px (Terry, 2026-10-28). Reuses a scale step, so C3 holds */ /* Canvas scale for share images, social and GBP at fixed pixel size. pick */ --fs-canvas-headline: 4.5rem; --fs-canvas-sub: 1.75rem; --fs-canvas-eyebrow: 1.25rem; /* Measure (TD4, C5). Every running-text block caps to this. FL:56 was 40rem, about 66ch at 17px. */ --measure: 66ch; --measure-headline: 18ch; /* canvas headlines. pick */ /* Baseline (TD1, C4). One unit; every vertical value is a whole multiple of it. The facelift's rem ramp was already multiples of 4px, so the unit is fixed and section padding steps by media query. */ --baseline: 0.25rem; /* Spacing ramp, in baseline units: 2, 3, 4, 6, 8, 12, 16. Each step is 33 to 50 percent above the last (C2). FL:46-52 */ --space-1: calc(var(--baseline) * 2); --space-2: calc(var(--baseline) * 3); --space-3: calc(var(--baseline) * 4); --space-4: calc(var(--baseline) * 6); --space-5: calc(var(--baseline) * 8); --space-6: calc(var(--baseline) * 12); --space-7: calc(var(--baseline) * 16); --space-section: calc(var(--baseline) * 14); /* 56px; 72px from 48em, 88px from 80em. FL:53 clamp(3.5rem, 6vw, 5.5rem) made discrete */ --space-container: clamp(1.25rem, 4vw, 2.5rem); /* horizontal gutter, not vertical rhythm. FL:54 */ --space-gap: var(--space-4); --space-gap-lg: var(--space-6); --container-max: 76rem; /* FL:55 */ --tap: 3rem; /* 48px touch target, floor 44 (CR10, C22). FL:60 */ --button-height: var(--tap); /* pill button height: 48px. Terry, 2026-10-28 */ --button-pad-x: var(--space-4); /* 24px */ /* Border radius. One radius for every card, tile and the header card; buttons, chips and the status pill are pills (C20). FL:58-59 */ --radius-sm: 0.5rem; /* nav links and menu rows inside a card. FL:179 */ --radius-md: 0.875rem; /* the one radius. FL:58 */ --radius-full: 999px; --radius-button: var(--radius-full); /* buttons are pills. Terry adopted Borg's pill button, 2026-10-28 */ /* Shadows. Named elevation scale, kept apart from brand devices (C19). A resting shadow is for the header card and the one feature card only (B7). Alpha snapped to the 05 and 10 steps. FL:31-32 */ --shadow-1: 0 12px 24px -16px var(--ldr-navy-10); /* quick tile hover */ --shadow-2: 0 24px 40px -24px var(--ldr-navy-10); /* card hover */ --shadow-3: 0 18px 40px -20px var(--ldr-navy-10), 0 2px 6px var(--ldr-navy-05); /* header card, mobile menu */ --shadow-4: 0 30px 60px -30px var(--ldr-navy-10), 0 2px 6px var(--ldr-navy-05); /* the one feature card */ --filter-cutout: drop-shadow(0 24px 30px var(--ldr-navy-35)); /* the hero cut-out's soft drop shadow. FL:249 */ --shadow-focus: 0 0 0 3px var(--ldr-primary-35); /* keyboard focus ring. FL:89 uses a 3px outline in primary */ /* Line heights (C6). FL:42-44 */ --lh-display: 1.12; --lh-heading: 1.2; --lh-body: 1.65; --lh-tight: 1.25; /* buttons, tile labels. FL:292 */ /* Letter spacing (C14). FL:106,45 */ --ls-display: -0.02em; --ls-heading: -0.01em; --ls-eyebrow: 0.08em; /* uppercase eyebrow label, letter-spaced */ /* Icons. Playbook section 08. Lucide, 24 grid, 2px stroke, round caps and joins. FL:141 */ --icon-size: 1.25em; --icon-size-lg: 1.5rem; --icon-stroke: 2; /* Signature moves. Playbook section 07. Only M4 is adopted, as the family below (four lines; the road was dropped 2026-11-01). */ --ldr-move-rule-length: 1.75rem; /* the dash before a small label: 28px long. In the facelift. FL:110 */ --ldr-move-rule-weight: 3px; /* the rule's corner radius is 2px, a hairline end. FL:110 */ --ldr-move-underline-weight: 6; /* SVG stroke units, the curved headline underline drawn once. Allowed in heroes and very selective h2s (Terry, 2026-11-01). FL:230 */ --ldr-photo-under-grade: 0.55; /* hero photo opacity under the two-direction linear gradient grade (primary and navy at 05 to 95 steps). FL:216-220 */ --ldr-glow: var(--ldr-neutral-15); /* the radial gradient glow (round, 50 percent radius) attached to the hero cut-out, never to a ground. FL:27 */ /* The accent family (Terry, 2026-10-29, revised 2026-11-01). Four drawn lines from the emblem, none filled, none looping: the dash and the curved underline above, plus rings and a heart outline. The road line was DROPPED 2026-11-01. Playbook section 07, M4. Used only at the opacity steps below, so text laid over them keeps its contrast (C8). */ --ldr-accent-stroke: 1.5px; /* every family line is this thin; the underline keeps its own weight */ --ldr-accent-ring-step: 5rem; /* 80px: gap between rings, a whole multiple of 4 (TD1) */ --ldr-accent-ring-count: 6; /* rings in a full set; a set may be cropped by an edge or hidden behind a card, so fewer show */ --ldr-accent-fade: 70%; /* how far from its edge a ring set fades out */ --ldr-accent-on-pale: var(--ldr-primary-30); /* ring on pale blue and grey grounds */ --ldr-accent-on-light: var(--ldr-primary-15); /* ring on white */ --ldr-accent-on-navy: var(--ldr-neutral-20); /* ring on a navy card */ --ldr-accent-heart-on-light: var(--ldr-primary-10); /* heart outline on white or pale: lighter than a ring (Terry, 2026-11-01: more subtle) */ --ldr-accent-heart-on-navy: var(--ldr-neutral-10); /* heart outline on a navy card: half the strength of a ring */ --ldr-accent-mask-on: #000000; /* the opaque end of a fade mask; a mask reads alpha only, never shows as colour */ --ldr-underline-on-light: var(--ldr-primary); /* the curved underline on white, pale and grey */ --ldr-underline-on-dark: var(--ldr-primary-100); /* the curved underline on blue and navy */ /* Emergency red (Terry, 2026-10-30 and 2026-10-31; Felicia liked it on the Find Care menu). The brand has no red, so this is one single-purpose token: every specific Emergency BUTTON uses it with white text, and nothing else does. A top-bar emergency mention stays a plain text link. White on 500 is 6.54:1, on 700 is 8.94:1; pale blue #E6F6FE on 500 is 5.91:1. HD qframe-tokens.css:19 to 22 */ --ldr-emergency-500: #B3261E; --ldr-emergency-700: #8E1E18; --bg-emergency: var(--ldr-emergency-500); --bg-emergency-hover: var(--ldr-emergency-700); /* Header and phone bar sizes (header v4, approved 2026-10-31). All whole multiples of the baseline. HD qframe-tokens.css:24 to 27 */ --header-card-h: 4.5rem; /* 72px: the header card, and the phone menu sheet's top bar */ --bbar-h: 4.5rem; /* 72px: the phone's fixed bottom bar */ --utility-h: 2.75rem; /* 44px: the desktop utility row */ --bg-mega-scrim: var(--ldr-navy-25); /* the veil behind an open mega menu: navy at 25, an overlay (03.3) */ --bar-btn: var(--ldr-primary); /* the header and bottom-bar Call Now button, and the phone menu button: hospital blue (05.14) */ --bar-btn-hover: var(--ldr-primary-600); /* Navy (Terry, 2026-10-29, narrowed 2026-11-01): navy is an accent or a CARD FILL, never a full-section background; on a navy card the button is white with navy text (03.8). */ --bg-navy: var(--ldr-primary-900); /* a navy card, tile or accent fill on a light ground; same value as --bg-deep, named for the job */ --strip-tile-min: 4.5rem; /* routing strip tile, 72px */ --plan-tile-height: 5rem; /* insurer tile, 80px: six tiles, two even rows of three */ /* Motion. Every animation has a prefers-reduced-motion state (C23). Motion finishes. FL:61-63, 430-436 */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --duration-fast: 180ms; --duration-base: 400ms; /* pick: between fast and slow, for panels */ --duration-slow: 600ms; --duration-draw: 900ms; /* the underline draws once. FL:230 */ --reveal-rise: 18px; --reveal-stagger: 80ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* Z-index scale */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 100; } @media (min-width: 48em) { :root { --space-section: calc(var(--baseline) * 18); } } @media (min-width: 80em) { :root { --space-section: calc(var(--baseline) * 22); } }