:root { /* ================================================================ COLOUR — the 2026 Figma variables (FND-1) ---------------------------------------------------------------- These five names mirror the Figma VARIABLE names exactly, so a design review can be done value-for-value against the variable table rather than against prose. PROVENANCE. Re-derived 2026-08-07 (DONI-925) from the CANONICAL file TJC7pZhPM2o5S0wuc1tnVI, by keyed get_variable_defs calls on four frames. Every read is recorded, per node, in docs/hcp-nxt/design-tokens.json — that file, not this comment, is what authorises a colour here. ⚠️ The previous version of this comment had the two files the WRONG WAY ROUND: it named ysKdLJZq7FA0mJo8YcGkef as canonical and TJC7pZhPM2o5S0wuc1tnVI as superseded. That was true on 2026-08-01 and was reversed on 2026-08-02 (pipeline.config.yml `canonical_confirmed_by`), so the citation went stale the next day and stayed wrong for six days. The four tokens below were re-read against the canonical file and are UNCHANGED — the old text was miscited, not incorrect. 🔑 `Coral` is the exception and is NOT single-valued. The canonical file returns #EB6F56 on 0.2 D Home and 1.4 D Safety, and #f16b50 on 1.3 D Patient-Reported Outcomes and 3.0 MOA. See --color-nav-active below, DONI-546, and the `findings` section of design-tokens.json. Do not "resolve" this by picking one; it is an open design question. Anything NOT in this block is not a Figma variable. Do not add one here without a variable name, a node id AND a file key to cite (C-024) — and add the read to design-tokens.json. ================================================================ */ --color-coral: #eb6f56; /* Figma variable "Coral" */ /* OVERRIDE — client-directed: Dark Coral retired in favour of regular Coral everywhere. This diverges from the Figma "Dark Coral" variable (#bb5844) on purpose; do not "fix" it back without checking this ticket. Original value kept as --color-dark-coral-original below so an accessibility pass can revert specific components without re-deriving the hex. */ --color-dark-coral: var(--color-coral); --color-charcoal: #1d2d3a; /* Figma variable "CHARCOAL" */ --color-steel: #515861; /* Figma variable "STEEL" */ --color-white: #ffffff; /* Figma variable "White" */ /* ---------------------------------------------------------------- Colours that are NOT Figma variables. Each is a literal baked into a component. Figma codegen prints them under a variable NAME whose value is something else, which is how two different oranges ended up side by side on one page. Confirmed as genuinely different colours by sampling the render. Do not collapse these into the variables above. ---------------------------------------------------------------- */ /* The LEGACY coral. Top-nav active label and its 6px indicator, bullets, FAQ toggles. Codegen prints `var(--coral, #f16b50)` here while the Coral variable is #eb6f56; the rendered nav samples #F16B50. Both corals survive for now — DONI-546 (BLK-3) is open and its interim answer is "keep both". */ --color-nav-active: #f16b50; /* ISI heading, and the "Please see full Prescribing Information" line. Was #c94808 (a dark-coral shade). DONI-578's interim "keep both" answer is superseded here by explicit client direction to move dark-coral to regular Coral across the site — this is now part of that same override, not a separate decision. Original value kept as --color-isi-heading-original for accessibility spot-reverts. */ --color-isi-heading: var(--color-coral); /* Pre-override values, kept only so a future accessibility pass can revert a specific selector to the old dark-coral shade without re-deriving the hex from Figma or git history. Not referenced by any component — reference these directly if a revert is needed. */ --color-dark-coral-original: #bb5844; --color-isi-heading-original: #c94808; /* Footer "Report Adverse Events". Literal #ff00b7 in the footer component, no variable binding. Previously named `--color-placeholder`, whose own comment said it "should be replaced in production" — it is not a placeholder, it is that link's real colour. Renamed here and at all 5 call sites. */ --color-alert-link: #ff00b7; /* Brand artwork colours, taken from the normalised logo SVGs. --color-ionis-org is corroborated by the canonical frames, which carry it as the library variable "haevnhub.com/Tango" #EF7822. */ --color-melon: #f8b095; /* fill in dawnzera-logo.svg */ --color-ionis-mag: #a1206a; /* ionis-logo-color.svg (Default) */ --color-ionis-org: #ef7822; /* ionis-logo-*.svg wings */ /* Chart legend markers (Figma variables on efficacy frames). */ --color-lemon: #fff095; /* Figma variable "LEMON" */ --color-neutral-2: #d6d2c4; /* Figma variable "NEUTRAL #2" */ --color-black: #000000; --color-light-melon: #FCEEE7; --color-eee: #eee; --color-dedede: #dedede; --color-dark-gray: #666666; /* ---------------------------------------------------------------- LEGACY ALIASES. One value, one canonical name, above; these point at it so unmigrated CSS keeps rendering identically. Each page ticket migrates its own call sites onto the canonical name and the alias is deleted when its count reaches zero. Counts measured 2026-08-01 with grep -ro "var([,)]" css components templates ---------------------------------------------------------------- */ --color-primary: var(--color-nav-active); /* 186 call sites */ --color-primary-dark: var(--color-isi-heading); /* 30 call sites */ --color-secondary: var(--color-charcoal); /* 61 call sites */ --color-text-primary: var(--color-charcoal); --color-text-secondary: var(--color-steel); --color-charcol: var(--color-charcoal); /* 107 call sites; misspelt */ --color-charchol: var(--color-charcoal); /* 14 call sites; misspelt */ --color-primary-light: #f59785; /* 21 call sites */ --color-secondary-dark: #0F2436; /* 2 call sites */ --color-text-light: #999999; /* 5 call sites */ /* ---------------------------------------------------------------- NOT in the 2026 design, but NOT removable yet. FND-1's acceptance criterion says "legacy tokens the 2026 design does not use are removed, not left shadowing". These are not used by the 2026 design — but they ARE used by the unmigrated page CSS that still ships, so removing them today would break 131 live declarations rather than clean anything up. Reported on DONI-541. Delete each as its last call site migrates. ---------------------------------------------------------------- */ --color-gray-100: #F8F9FA; /* 36 */ --color-gray-200: #E9ECEF; /* 38 */ --color-gray-300: #DEE2E6; /* 20 */ --color-gray-400: #CED4DA; /* 7 */ --color-gray-500: #ADB5BD; /* 1 */ --color-success: #28A745; /* 19 */ --color-warning: #FFC107; /* 10 */ --color-error: #DC3545; /* 19 — no 2026 equivalent specified; DONI-660 (Error Message Matrix) owns what an error actually looks like */ --color-border: #E0E0E0; --color-border-light: #eeeeee; --color-overlay-dark: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(255, 255, 255, 0.5); /* REMOVED by FND-1, each verified to have zero call sites first: --silver-gradient (0 uses) --color-accent (0 uses, duplicated --color-gray-100) --color-placeholder (5 uses, renamed --color-alert-link) NOT CARRIED from figma-to-html/_shared/tokens.css, with reasons: --color-neutral-2 #d6d2c4, --color-lemon #fff095 Carried there from the efficacy build and flagged unverified. Confirmed absent 2026-08-01 from the canonical Home and Safety variable tables, by name AND by value. Not added. Efficacy's own frame was not queried, so if the efficacy ticket needs them it must measure them first. --color-page #ffffff — identical to --color-white. --color-rule #d9d5d2 — CONFLICT, not an omission. This theme already defines --color-rule as the coral (see the WYSIWYG aliases below) and text-wysiwyg's hr depends on it. Two different values under one name; recorded on DONI-541. ---------------------------------------------------------------- */ /* ================================================================ FIGMA CODEGEN NAMES — FND-7 (DONI-675) ---------------------------------------------------------------- Figma's codegen prints `var(--Coral, #f16b50)` and friends. None of those names were ever declared, so every one of those call sites rendered its baked-in fallback and the token layer was simply NOT IN EFFECT there. Nothing errored and nothing looked wrong, which is why it survived this long. Declaring them here is RENDER-NEUTRAL, and that was measured, not assumed: every name below carries exactly ONE value across all its call sites, and the value it is given here is that value. What changes is that these surfaces now follow the token when it moves. 🔎 THIS REFUTES THE WORRY THE TICKET WAS WRITTEN AROUND. FND-7 said defining `--Coral` would "flip 27 call sites to a value nobody has reviewed", because "the same wrong fallback was printed everywhere, including on bands that render the other coral". Measured across the whole theme, all 27 print #f16b50 — the only variance is letter case (22x #f16b50, 5x #F16B50). No site prints #eb6f56. That agrees with DONI-546's 2026-08-03 re-measurement of the canonical file, where the Figma variable `Coral` returned #f16b50 on all four nodes queried. The bands' #eb6f56 is a LITERAL FILL, not this variable — which is exactly what that comment concluded. ⚠️ Names whose fallbacks genuinely DISAGREED are deliberately NOT here. --Size-Body meant 20px on eleven surfaces and 15px on one; --body-font-weight meant 400 on twelve and 700 on four. Declaring either value would silently change the other, so those 56 call sites had the reference removed and their own value inlined instead. The full list is on the ticket. ================================================================ */ /* Colour. Each aliases the canonical name rather than repeating a hex, so there is still exactly one place to change a value. */ --Coral: var(--color-nav-active); /* 27 sites, all #f16b50 */ --CHARCOAL: var(--color-charcoal); /* 24 sites, all #1d2d3a */ --Dark-Coral: var(--color-isi-heading); /* 14 sites, all #c94808 */ --White: var(--color-white); /* 9 sites: #fff/#FFF/white */ --STEEL: var(--color-steel); /* 8 sites, all #515861 */ --white: var(--color-white); /* 2 sites */ --steel: var(--color-steel); /* 2 sites */ /* Named "red" by the codegen; the value is dark coral. The name is wrong and the value is right — aliased rather than renamed, because renaming is a call-site change and this ticket owns the token. */ --color-red: var(--color-isi-heading); /* 1 site, #c94808 */ /* Type families. All resolve to faces the typekit actually serves. */ --Font-Body: var(--font-agenda); /* 10 sites, "Agenda" */ --Font-H3: var(--font-tilt-neon); /* 9 sites */ --Font-H2: var(--font-tilt-neon); /* 4 sites */ --Font-H1: var(--font-tilt-neon); /* 1 site */ --Font-H4: var(--font-agenda); /* 2 sites, "Agenda" */ --Font-Footnote: var(--font-agenda); /* 2 sites, "Agenda" */ --Font-Body-LG: var(--font-agenda); /* 1 site */ --font-sans: var(--font-agenda); /* 1 site, sitemap.css:39 */ /* 🔴 --font-body is the ONE deliberate render change in FND-7. Its three call sites in resources.css print `var(--font-body, Arial, sans-serif)`. Undefined, they render ARIAL — not the brand face — on a regulated product page. Pointing it at the body family is the fix, not a side effect. Listed explicitly on DONI-675 as required, and verified in a browser. */ --font-body: var(--font-agenda); /* 3 sites: Arial -> agenda */ /* Type sizes. Mapped to the FND-3 scale where a step already exists, so these do not become a second, competing scale. */ --body-font-size: var(--fs-20); /* 18 sites, all 20px */ --h4-font-size: var(--fs-26); /* 4 sites, all 26px */ --Size-H2: var(--fs-40); /* 3 sites, all 40px */ --Line-Height-Body: 20px; /* 2 sites */ --Size-Body-Bold: var(--fs-16); /* 1 site, 16px */ --Line-Height-Body-Bold: 20px; /* 1 site */ --Size-Body-LG: 18px; /* 1 site */ --Line-Height-Body-LG: 22px; /* 1 site */ --Line-Height-H3: 44px; /* 1 site */ /* ⚠️ 52px/60px are NOT in the FND-3 type scale, which tops out at --fs-40. Recorded at their measured call-site value rather than snapped to a step, because snapping would be a design change. Both sit on page-not-found and hae-prevention. Worth a look under the type-scale ticket; not resolved here. */ --Size-H1: 52px; /* 2 sites */ --Line-Height-H1: 60px; /* 1 site */ /* Figma "SDS" spacing primitives, from the imported design-system kit rather than this project's scale. ⚠️ Only the 400 step has an equivalent here. 12px is NOT on this theme's 8px grid (--space-sm is 8, --space-md is 16), so the 300 step is recorded at its measured value rather than aliased to the nearest --space-*; --space-lg is 24px and would have doubled it. */ --var-sds-size-space-300: 12px; /* 4 sites, all 12px */ --var-sds-size-space-400: var(--space-md); /* 4 sites, all 16px */ /* ISI tray, mobile minimised height. Declared in isi_tray's own CSS for desktop; the mobile variant was referenced and never declared. 🔴 76px, NOT 50px (BugHerd 814). Because this is a real declaration and not a fallback, it BEATS every `var(--isi-tray-minimized-height-mobile, …)` fallback in hcp_nxt_isi/css/isi-tray.css and in this theme's own isi-tray.css — correcting either of those alone changes nothing at mobile, verified in the browser before this line was touched. The JS still wins over it when `hcp_nxt_isi.settings` carries a height, because `setHeights()` writes an inline custom property on . 76 = 16 + 44 + 16 is the Figma collapsed mobile frame (29513:53725): two 22px title lines between the 16px margins the collapsed rule reserves. At 50px the body got 18px, so the second line vanished and the first was sliced through the glyphs. Measured at 375 on dev-nxt 2026-08-27. */ --isi-tray-minimized-height-mobile: 76px; /* 1 site */ /* The desktop and tablet siblings, declared here for the first time so FND-7 (DONI-675) holds: a `var()` whose token is undeclared and whose fallback someone later drops is DISCARDED, not defaulted. Same Figma frame as the mobile value above — 29513:53713 is 1440x72 = 24 + 24 + 24, one 22px title line between the 24px margins the collapsed rule reserves. No tablet comp exists (`C-023` — 1440 and 375 are the only widths drawn), but the tablet collapsed body uses the DESKTOP margins, so it takes the desktop height. Both match config/install/hcp_nxt_isi.settings.yml. */ --isi-tray-minimized-height: 72px; --isi-tray-minimized-height-tablet: 72px; /* The desktop INITIAL (default) height, declared for the same FND-7 reason. 129px is Figma 29513:82323 — 1440x129, content 109 between 16px top and 4px bottom padding, showing the title, CONTRAINDICATIONS and two whole body lines. At the previous 120px the window cut the second body line 6.5px short of its descenders. The mobile and tablet siblings are NOT declared here: both still slice, and neither has a value that is both measured and lands on a line boundary — see the notes in hcp_nxt_isi/css/isi-tray.css. */ --isi-tray-medium-height: 129px; --isi-tray-medium-height-mobile: 202px; /* Typography --------------------------------------------------------------- Typekit `gzb5nao` serves EXACTLY these faces, verified against https://use.typekit.net/gzb5nao.css: agenda 400, 400i, 500, 500i, 700, 700i tilt-neon 400 only Anything else is synthesised by the browser. Do not request a weight or style that is not on that list. */ /* Both display-font names are listed on purpose. Adobe serves the family as `tilt-neon`; Google Fonts served it as `Tilt Neon`, and the Google link has been removed (FND-3). Dropping the Google name is safe, but keeping it costs nothing and means a stale cached copy still resolves instead of silently falling back to Georgia. */ --font-family-primary: 'agenda', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-family-secondary: 'tilt-neon', 'Tilt Neon', Georgia, 'Times New Roman', serif; --font-family-mono: 'SF Mono', Monaco, 'Courier New', monospace; /* Figma Design System Typography */ --font-agenda: 'agenda', Arial, sans-serif; --font-tilt-neon: 'tilt-neon', 'Tilt Neon', Georgia, serif; /* `Agenda One` does not exist in the kit. Figma codegen prints font-['Agenda_One:Italic'] for journal names in the reference lists; the nearest real face is agenda italic 400, which is what these resolve to. Flagged to design — do not request the family by name, and do not substitute a different family to approximate it. Apply all three together: font-family: var(--font-agenda-one); font-style: var(--font-agenda-one-style); font-weight: var(--font-agenda-one-weight); */ --font-agenda-one: var(--font-agenda); --font-agenda-one-style: italic; --font-agenda-one-weight: 400; /* --- 2026 type scale ------------------------------------------- FIXED, not fluid, and deliberately so. MLR sign-off happens on a rendered page at a named viewport; a clamp() makes the approved size depend on the reviewer's window width, so "approved" stops naming a single artifact. Override at a breakpoint instead. Tokens are named by size rather than by role because the roles are not settled — DONI-582 is still open on whether the cross-link banner title is 22px or 26px. Every value below was MEASURED in the 2026 comps and carries its provenance. Do not add a step without measuring one, and do not interpolate between them. */ --fs-40: 40px; /* largest heading in the 2026 comps */ --fs-28: 28px; --fs-26: 26px; /* homepage banner title, node 29741:17855 */ --fs-22: 22px; /* safety headline title, node 29741:27046 */ --fs-20: 20px; /* notification bar text, node 28339:19925 */ --fs-16: 16px; /* Superscript. Ratio is exact on all four sizes present in the comps: 25.8/40, 18.06/28, 12.9/20, 10.32/16. */ --sup-ratio: 0.645em; /* figma-to-html/_shared/tokens.css names the type tokens by ROLE. FND-3 named them by SIZE instead, deliberately — the roles are not settled, and DONI-582 is still open on whether the cross-link banner title is 22px or 26px. Both files describe the same values; this is the mapping, so a value-for-value design review can still be done: --size-h2 40px -> --fs-40 (Figma "Desktop/H2") --size-h4-alt 26px -> --fs-26 (Figma variable "Size/H4") --size-h4 22px -> --fs-22 (Figma "Desktop/H4") --size-body 20px -> --fs-20 (Figma variable "Size/Body") --size-button 19px -> none yet (SDC-1 button owns this) --size-footnote 16px -> --fs-16 (Figma "Footnote") --font-body -> --font-agenda --font-display -> --font-tilt-neon --weight-regular -> --font-weight-normal --weight-bold -> --font-weight-bold --line-height normal -> --line-height-body / -display, PINNED. FND-3's one deliberate deviation; see the note below. Confirmed 2026-08-01 against the canonical file: Size/H4=26 and Desktop/H4=22 both genuinely exist there, so DONI-582 is a real design conflict rather than an extraction error. --size-button (19px) has no token yet because nothing uses it. */ /* Legacy fluid scale. Inherited from dawnzerahcp_full at fork time and still referenced by the unmigrated page CSS, so it cannot be deleted yet. New work uses the --fs-* tokens above; each page ticket migrates its own CSS off these. */ --font-size-xs: clamp(0.75rem, 0.7vw, 0.875rem); /* 12-14px */ --font-size-sm: clamp(0.875rem, 0.9vw, 1rem); /* 14-16px */ --font-size-base: clamp(1rem, 1vw, 1.125rem); /* 16-18px */ --font-size-lg: clamp(1.125rem, 1.2vw, 1.25rem); /* 18-20px */ --font-size-xl: clamp(1.25rem, 1.5vw, 1.5rem); /* 20-24px */ --font-size-2xl: clamp(1.5rem, 2vw, 2rem); /* 24-32px */ --font-size-3xl: clamp(2rem, 2.5vw, 2.5rem); /* 32-40px */ --font-size-4xl: clamp(2.5rem, 3vw, 3rem); /* 40-48px */ --font-size-5xl: clamp(3rem, 4vw, 4rem); /* 48-64px */ /* Font Weights. 300 and 600 are not in the kit. CSS font matching resolves them to 400 and 700 respectively, so they render a real face rather than a synthesised one — but they are misleading to read, and new work should use the three weights that actually exist. */ --font-weight-light: 300; /* legacy alias; resolves to 400 */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* legacy alias; resolves to 700 */ --font-weight-bold: 700; /* Figma layers marked `Agenda:Black` render at 700. Agenda Black is not in the kit; requesting 900 makes Chrome synthesise a smeared faux weight. Use this token so the intent stays readable. */ --font-weight-black: 700; /* Line Heights. Every Figma type style declares `lineHeight: 100`. Read literally as `line-height: 1` that is wrong — measured nodes land at 1.19-1.20. These are PINNED rather than left to `line-height: normal`. `normal` is font-metric and engine dependent: Chrome resolves it to ~1.19 for agenda but ~1.57-1.66 for tilt-neon, so a single `normal` default reproduces the comps for body text and silently breaks the display font. --line-height-display is one measurement out of three that disagreed: 1.19 homepage, 1.25 dosing, 1.286 safety. 1.2 is chosen for consistency with body and because the homepage is the most reviewed page. Safety may need a local override; measure before adding one. */ --line-height-body: 1.2; --line-height-display: 1.2; --line-height-tight: 1.2; --line-height-normal: 1.5; /* legacy; not a 2026 value */ --line-height-relaxed: 1.75; /* legacy; not a 2026 value */ --line-height-loose: 2; /* legacy; not a 2026 value */ /* Spacing System (8px base) */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px */ --space-3xl: 3rem; /* 48px */ --space-4xl: 4rem; /* 64px */ --space-5xl: 5rem; /* 80px */ --space-6xl: 6rem; /* 96px */ --padding-size-xs: 0.5rem; /* 8px */ --padding-size-sm: 1rem; /* 16px */ --padding-size-md: 1.25rem; /* 20px */ --padding-size-lg: 2rem; /* 32px */ --padding-size-xl: 3rem; /* 48px */ --padding-size-2xl: 4rem; /* 64px */ --padding-size-3xl: 5rem; /* 80px */ --padding-size-4xl: 6rem; /* 96px */ --padding-size-5xl: 8rem; /* 128px */ /* Spacing – Gap (Canvas layout components: columns, text-wysiwyg) */ --gap-size-xs: 0.25rem; /* 4px */ --gap-size-sm: 0.5rem; /* 8px */ --gap-size-md: 1rem; /* 16px */ --gap-size-lg: 1.5rem; /* 24px */ --gap-size-xl: 2rem; /* 32px */ --gap-size-2xl: 3rem; /* 48px */ --gap-size-3xl: 8rem; /* 128px */ --footer-links: 60px; --section-margin: 60px; /* ================================================================ THE CONTAINER RULE — FND-2 (DONI-542). APPLIED, not just declared. ---------------------------------------------------------------- Measured against the canonical 1440 desktop comp (Figma variable "Grid/Foundations/display-width" = 1440, confirmed on the 0.2 D Home frame) and the 375 mobile comp. Sign-off is 1440 / 375 per DONI-547; between them the requirement is "does not break". THE THREE NUMBERS ARE NOT INDEPENDENT: --page-width = --content-width + 2 x --gutter 1368 = 1200 + 2 x 84 Change one and you must change another. --content-width (1200) is the design's content column and is the fixed point; the other two serve it. WHY 1368 AND NOT 1440. The comp is drawn on a 1440 frame with 120px gutters. A shell of `max-width: 1440; padding: 0 120` and a shell of `max-width: 1368; padding: 0 84` are INDISTINGUISHABLE at 1440 — the second is centred with a 36px margin, and 36 + 84 = 120. Measured in a browser at 1440 on 2026-08-03: content edge at x=120, content box 1200 wide, under both. They differ only BELOW 1440, where 1368/84 keeps more content visible. That is why PR #128 moved these from 1440/120, and it was right to; the values changed but the rendered design did not. THE GUTTER IS FLUID, AND HAS NO BREAKPOINT. --gutter-fluid tracks the content box down from 1368 and floors at 24px so nothing ever runs to the screen edge. Evaluated: 375 -> 24 (content 327) <- 9 rules in this theme already 768 -> 24 (content 720) say `max-width: 327px`, i.e. 1024 -> 24 (content 976) 375 - 2x24. Corroborates it. 1200 -> 24 (content 1152) 1368 -> 84 (content 1200) <- content locks at 1200 here 1440 -> 84 (content 1200, offset 120 by the centring margin) 1920 -> 84 (content 1200) Content width is MONOTONIC across that whole range. The rule this replaced was not: it stepped the gutter 24 -> 48 -> 84 at 768 and 1024, so content SHRANK by 48px crossing 768->769 and by another 72px crossing 1024->1025. ⚠️ APPLY THIS TOKEN, DO NOT REBUILD THE EXPRESSION. Every page-level boundary — .container, .nav-container, the headline band — uses `padding-inline: var(--gutter-fluid)` so the header logo, the band title and page content share one left edge at every width. Three files previously declared .container independently with fallbacks that disagreed (1368 vs 1440, 84px vs 120px); they now all defer here. DONI-547's tablet-comp question was split into DONI-864 and resolved 2026-08-08: no tablet comp exists, so the hamburger nav (navbar.css) now covers 375-1199 instead of 375-991. This gutter expression is unaffected either way — it has no breakpoint of its own. ================================================================ */ --content-width: 1200px; /* the design's content column — fixed point */ --gutter: 84px; /* gutter at and above --page-width */ --gutter-min: 24px; /* floor; never run to the screen edge */ --page-width: 1368px; /* = --content-width + 2 * --gutter */ /* THE expression. One place, one definition. For elements that are THEMSELVES capped at --page-width: .container, .nav-container. Capped at --gutter because the centring margin supplies the rest above 1368. */ --gutter-fluid: clamp( var(--gutter-min), calc((100vw - var(--content-width)) / 2), var(--gutter) ); /* Same expression WITHOUT the cap, for FULL-BLEED elements — ones whose background must reach the viewport edge, so they cannot be capped and cannot be centred. The headline band is the only one today. A full-bleed element padded with --gutter-fluid does NOT line up with a capped one: at 1920 the capped shell is centred with a 276px margin and pads 84 (content edge 360), while the bleed element pads 84 from the viewport (content edge 84) — 276px adrift. That bug was live on the headline band and was found by measuring, not reading. Uncapped, the middle term IS the alignment: because --page-width - 2 x --gutter = --content-width exactly, (100vw - --content-width) / 2 equals (100vw - --page-width) / 2 + --gutter — the centring margin plus the gutter. Identical to --gutter-fluid below 1368, correct above it. */ --gutter-bleed: max( var(--gutter-min), calc((100vw - var(--content-width)) / 2) ); /* 🔴 CORRECTED 2026-08-06 (DONI-561 QA). These two used to be labelled "a RECORD OF THE DESIGN FILE, not values to build from", on the strength of a claim that the footer divider is `w-full` and so 656 was never intent. THAT CLAIM IS FALSE. The divider is drawn at 656 x 1 with its left edge at x=392, centred in the 1440 frame — `29999:57225 > Footer divider (Line 1)`, verified in docs/hcp-nxt/measured-frames.json. So --footer-content IS the divider's layout width and is used as such by .footer__seperation, and --footer-gutter is the inset that centres it (392 + 656 + 392 = 1440). What survives of the old note is narrower and still true: the frame's `padding: 0 392px` cannot be the CONTENT box, because the link row (~1310px) and legal line (~1190px) are both `white-space: nowrap` and Figma `overflow: clip`s them. Build the footer's CONTENT from --footer-inner below; build the DIVIDER from --footer-content. */ --footer-gutter: 392px; --footer-content: 656px; /* The footer's CONTENT width, 1440 - (2 x 40). The 40px is derived, not chosen: the cookie control in the same frame is pinned at `left: 40px; top: 40px`, so 40px is the padding the frame already uses on the one child positioned against it. The link row fits on one line at 1360 and wraps at 1200. ⚠️ The divider does NOT use this — it is 656 (--footer-content), centred inside this box. */ --footer-inner: 1360px; --stroke-1: 1px; /* Figma variable "stroke weight/1" */ /* Layout Variables ---------------------------------------------------------------- FND-2 collapsed the parallel container tokens into the block above. What survives here is the narrow variant, plus aliases kept so the unmigrated page CSS keeps rendering identically. Each page ticket migrates its own call sites and the alias is deleted when its count reaches zero — the same discipline as the colour aliases. */ --container-max-width: var(--content-width); /* 18 call sites */ --container-default-max-width: var(--page-width); /* Canvas Container/Columns "Default" */ --container-narrow-max-width: 1004px; /* Canvas "Narrow" content width */ --container-padding: var(--space-lg); --layout-max-width: var(--container-max-width); --container-padding-mobile: var(--container-padding); /* --layout-gutter, --layout-gutter-tablet and --layout-gutter-mobile are GONE. They existed only to feed the three duplicate .container blocks, which stepped the gutter at 768 and 1024 and made content width non-monotonic (see the container rule above). All three blocks now use --gutter-fluid, which needs no breakpoint. Verified 2026-08-03 that nothing else referenced them. */ /* Text WYSIWYG aliases */ --font-family-base: var(--font-agenda, var(--font-family-primary)); --font-family-heading: var(--font-tilt-neon, var(--font-family-secondary)); --color-text: var(--color-text-primary); --color-text-heading: var(--color-secondary); --color-text-muted: var(--color-text-secondary); --color-text-accent: var(--color-primary); /* --color-dark-coral was redeclared here at #bb5844, shadowing its own earlier declaration with the same value. Removed by FND-1; it is now declared once, in the Figma-variable block. */ --color-link: var(--color-dark-coral); --color-link-hover: var(--color-primary-dark); --color-rule: var(--color-primary); --wysiwyg-font-size: 20px; --primary-orange: var(--color-primary); --secondary-orange: var(--color-melon); --header-height: 80px; /* CHR-1 (DONI-555): measured from the canonical Figma file. * --header-height-mobile 29978:88114 "Mobile nav" 375 x 90 * --utilitybar-height 29978:88115 375 x 24 * The utility strip was 30px here because it shipped at 16px text with * 6px/6px padding; the design is 14px text on an 18px line box with * 4px/2px padding. `header.top-header` offsets itself by this value at * mobile, so it has to track the strip or the header overlaps it. */ --header-height-mobile: 90px; --utilitybar-height: 24px; --sidebar-width: 300px; --content-max-width: 65ch; /* Grid & Flexbox */ --grid-gap: var(--space-lg); --grid-columns: 12; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Figma 28965:88137 (chart Container) — 0 / 0 / 8 blur / 0 spread / #000 15% */ --shadow-chart-card: 0 0 8px 0 rgba(0, 0, 0, 0.15); /* --- 2026 Figma effects ---------------------------------------- Verbatim from get_variable_defs on the canonical Home and Safety frames; both agree: "Drop shadow" DROP_SHADOW #51586129 offset(0, 8) r24 s-4 "Dropshadow - ISI" DROP_SHADOW #51586114 offset(0,-4) r24 s-4 #51586129 = rgba(81,88,97,0.16); #51586114 = rgba(81,88,97,0.08). Codegen converts these inconsistently — some instances emit `drop-shadow(0 8px 12px ...)`, halving the blur and dropping the spread because filter:drop-shadow has no spread. The box-shadow form below is the faithful one; use it. Named after the Figma EFFECT, with the pre-existing theme names kept as aliases. Note the collision this resolves: this theme's --shadow-card already meant the header drop shadow, while figma-to-html/_shared/tokens.css uses --shadow-card for the efficacy chart card's `0 0 4px rgba(0,0,0,0.15)`, which is a different effect entirely. Recorded on DONI-541. */ --shadow-header: 0px 8px 24px -4px rgba(81, 88, 97, 0.16); --shadow-isi: 0px -4px 24px -4px rgba(81, 88, 97, 0.08); /* figma-to-html resources .section--shadowed / Figma Drop shadow * X:0 Y:8 Blur:24 Spread:-4 Color:#515861 @ 16% */ --shadow-section-top: 0px 8px 24px -4px rgba(81, 88, 97, 0.16); --shadow-card: var(--shadow-header); /* legacy alias */ --shadow-section: var(--shadow-isi); /* legacy alias */ /* Custom shadows found in components */ --shadow-focus-primary: 0 0 0 3px rgba(241, 107, 80, 0.1); --shadow-focus-error: 0 0 0 3px rgba(220, 53, 69, 0.1); --shadow-glow-primary: 0px 0px 8px 0px var(--color-primary-dark), 0px 0px 8px 0px var(--color-primary-light); /* Neon divider (SDC-5) — SVG ends + mid-tube strip sampled from the same SVG join edge (neon-tube-mid.png / neon-tube-mid-h.png). Placement utilities: css/base/neon-divider.css Pseudo edges: .neon-top | .neon-bottom | .neon-left | .neon-right */ --neon-divider-thickness: 16.035px; --neon-divider-end-width: 16.035px; --neon-divider-end-height: 36.494px; --neon-divider-height-vertical: 199px; /* Utility band + gap — caps define horizontal extent; thickness defines vertical. */ --neon-divider-band-horizontal: var(--neon-divider-end-height); --neon-divider-band-vertical: var(--neon-divider-thickness); --neon-divider-gap: var(--space-md, 1rem); --neon-divider-tube-inset: 10px; --neon-divider-end-src: url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"); --neon-divider-tube-v-src: url("../../images/pipes/neon-tube-mid.png"); --neon-divider-tube-h-src: url("../../images/pipes/neon-tube-mid-h.png"); /* Border Radius */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-base: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* Z-index Scale */ --z-negative: -1; --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; /* Breakpoints */ --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1400px; } /* Tablet adjustments */ @media (min-width: 768px) { :root { --container-padding: var(--space-lg); } } /* Desktop adjustments */ @media (min-width: 1250px) { :root { --container-padding: 0; } } /* Dark mode support (optional) */ @media (prefers-color-scheme: dark) { :root { /* Dark mode overrides can be added here */ } } /* Motion preferences */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }