RegiCare design system

Build meta

2026-07-11T11:04:53.075Z

/design-system

/design-system-ai

/regicare-design-system/catalog.json

/regicare-design-system/catalog.md

src/design-system/tokens.ts, colours.ts, typography.ts, layout.ts, componentStyles.ts; page: src/pages/DesignSystemPage.tsx

Design tokens (flattened)

Colours (e.g. tokens.color.brand.primary), typography utilities, spacing, cards, buttons, forms, heroes, CTAs, and link row recipes as used in production.

#005EB8

#E6399B

#059669

#152238

#FFBE00

#E6399B

#059669

#F9F9F9

#FFFFFF

#F8FAFC

#F1F5F9

#005EB8

rgba(0, 0, 0, 0.5)

#0F172A

#334155

#475569

#FFFFFF

rgba(255, 255, 255, 0.85)

#E6399B

#E2E8F0

#F1F5F9

#E6399B

rgba(255, 255, 255, 0.2)

"Open Sans", ui-sans-serif, system-ui, sans-serif

400

500

700

font-normal

font-medium

font-bold

text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl

text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl

text-base font-bold leading-snug sm:text-lg md:text-2xl

text-sm font-bold sm:text-base lg:text-lg

text-sm font-normal sm:text-base lg:text-lg

text-[14px] font-medium leading-relaxed text-slate-900 sm:text-[15px] sm:font-semibold sm:text-base lg:text-[17px] lg:font-semibold lg:text-slate-900 xl:text-lg xl:font-semibold xl:leading-relaxed

text-base font-normal leading-relaxed

text-base font-normal leading-relaxed

text-base font-normal leading-relaxed md:text-lg

text-[15px] font-normal leading-relaxed

text-base font-medium leading-relaxed

text-sm font-normal leading-relaxed text-slate-900 sm:text-base md:text-lg

text-sm font-normal leading-relaxed sm:text-base

text-base font-bold

text-base font-normal

text-base font-bold leading-tight text-brand-blue sm:text-lg md:text-2xl md:leading-tight lg:text-3xl

text-base font-bold text-brand-blue sm:text-xl

text-lg font-bold leading-snug text-white [text-wrap:pretty] sm:text-2xl

text-sm font-bold sm:text-base

text-base font-bold text-brand-blue sm:text-lg

text-sm font-normal leading-relaxed text-slate-700 sm:text-base

text-base font-bold text-brand-blue sm:text-lg

text-base font-bold text-brand-blue sm:text-xl lg:text-2xl

text-base font-bold leading-snug sm:text-lg md:text-xl

text-sm font-normal text-brand-blue sm:text-base md:text-lg

text-sm font-normal leading-relaxed md:text-base

text-lg font-bold leading-snug text-white [text-wrap:pretty] sm:text-2xl

text-sm leading-relaxed

flex flex-col gap-y-2 sm:gap-y-3

mt-0.5 h-3.5 w-3.5 shrink-0 sm:h-5 sm:w-5

text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl

text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl

text-base font-bold leading-snug sm:text-lg md:text-2xl

text-sm font-bold sm:text-base lg:text-lg

text-[14px] font-medium leading-relaxed text-slate-900 sm:text-[15px] sm:font-semibold sm:text-base lg:text-[17px] lg:font-semibold lg:text-slate-900 xl:text-lg xl:font-semibold xl:leading-relaxed

text-base font-normal leading-relaxed

text-base font-normal leading-relaxed md:text-lg

text-[15px] font-normal leading-relaxed

text-base font-medium leading-relaxed

text-base font-normal leading-relaxed text-slate-600

text-base font-normal leading-relaxed leading-snug text-slate-600

text-[15px] font-normal leading-relaxed

text-sm font-normal leading-relaxed sm:text-base

text-[15px] font-normal leading-relaxed

text-base font-normal leading-relaxed font-bold text-slate-600

text-base font-normal leading-relaxed font-bold text-brand-blue

text-base font-normal leading-relaxed font-bold text-brand-pink

text-base font-normal leading-relaxed text-slate-700

text-base font-normal leading-relaxed leading-relaxed text-slate-700

text-base font-normal leading-relaxed font-bold

text-base font-normal leading-relaxed text-slate-500

text-base font-normal leading-relaxed

rounded-xl bg-white p-1

border border-slate-300 bg-white text-slate-600 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-800

border border-slate-300 bg-white text-slate-600 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-800

border border-transparent bg-brand-pink font-medium text-white shadow-sm shadow-brand-pink/20

border border-transparent bg-brand-green font-medium text-white shadow-sm shadow-brand-green/20

bg-brand-green

rounded-2xl bg-slate-50

text-brand-blue

text-slate-700 leading-relaxed

py-12 sm:py-20

pb-24

pt-20 sm:pt-28 lg:pt-32

px-5 sm:px-8 lg:px-10 xl:px-12

p-8 md:p-10

max-w-7xl

max-w-5xl

max-w-[1080px]

max-w-[1200px]

max-w-4xl

rounded-xl

rounded-2xl

rounded-3xl

rounded-lg

rounded-lg

shadow-xl shadow-slate-200/50

shadow-sm

shadow-lg shadow-black/20

shadow-lg shadow-brand-pink/20

shadow-2xl

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-green px-6 text-white shadow-lg shadow-brand-green/20 lg:px-10 lg:shadow-xl w-full md:w-auto

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 border border-slate-200 bg-white px-6 text-slate-700 hover:bg-slate-50 lg:px-10 w-full md:w-auto

inline-flex items-center justify-center text-sm font-bold text-brand-pink underline-offset-4 transition-all hover:underline

rounded-2xl border border-slate-100 bg-white p-8 md:p-10 shadow-xl shadow-slate-200/50

rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50

rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-sm

rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm

group flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-6 transition-all hover:border-brand-blue hover:bg-brand-blue hover:shadow-md

group flex h-full flex-col rounded-2xl border border-brand-green bg-brand-green p-6 shadow-md shadow-brand-green/20 transition-all hover:brightness-105

text-xl font-bold leading-snug text-brand-blue transition-colors group-hover:text-white sm:text-2xl

text-lg font-bold leading-snug text-white md:text-xl lg:text-2xl

text-lg font-bold leading-snug text-brand-pink transition-colors group-hover:text-white sm:text-xl

mb-3 text-sm font-bold leading-snug text-white md:text-base

text-base font-normal leading-relaxed text-slate-600 transition-colors group-hover:text-white/90

text-base font-normal leading-relaxed mb-6 flex-grow font-normal leading-relaxed text-white/90 md:text-base

inline-flex items-center text-left text-sm font-bold text-brand-pink underline-offset-4 transition-colors hover:underline group-hover:text-white group-hover:underline

inline-flex items-center text-left text-sm font-bold text-white underline-offset-4 hover:underline

mb-2 block text-base font-normal leading-relaxed font-bold text-slate-700

min-h-[3.5rem] w-full rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white placeholder:text-slate-400 placeholder:font-normal

flex min-h-[3.5rem] w-full items-center rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-left text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white

ring-2 ring-brand-pink focus:ring-2 focus:ring-brand-pink

mt-1.5 text-base font-normal leading-relaxed text-slate-600

mt-1.5 text-base font-normal leading-relaxed font-medium text-brand-pink

relative overflow-x-clip bg-brand-blue px-4 pb-20 pt-20 text-white sm:px-6 sm:pt-28 lg:px-8 lg:pt-32

relative overflow-x-clip bg-brand-blue px-4 pb-14 pt-10 text-white sm:px-6 sm:pb-20 sm:pt-14 lg:px-8 lg:pt-20

relative overflow-x-clip bg-white px-4 pb-14 pt-10 text-slate-900 sm:px-6 sm:pb-20 sm:pt-14 lg:px-8 lg:pt-20

relative overflow-x-clip bg-brand-blue px-4 pb-10 pt-8 text-white sm:px-6 sm:pb-12 sm:pt-10 lg:px-8 lg:pb-14 lg:pt-14

text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl

text-base font-medium leading-relaxed text-slate-200 md:text-lg

-mt-8

relative overflow-hidden bg-brand-blue py-14 text-white sm:py-20

relative overflow-hidden rounded-2xl bg-brand-blue p-8 text-white shadow-xl sm:p-10 md:p-12 xl:p-14

text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl

text-base leading-relaxed text-white/85 sm:text-lg

group inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-bold leading-snug text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white sm:text-base lg:px-5 lg:py-3

inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-brand-blue bg-brand-blue px-4 py-2.5 text-base font-bold text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-5 lg:py-3

h-4 w-4 shrink-0 text-brand-blue transition-transform group-hover:translate-x-0.5 group-hover:text-white lg:h-5 lg:w-5

h-4 w-4 shrink-0 text-white lg:h-5 lg:w-5

group inline-flex min-w-0 w-full items-center rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-base font-bold leading-snug text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white lg:px-4 lg:py-2.5

inline-flex min-w-0 w-full items-center rounded-lg border border-brand-blue bg-brand-blue px-3 py-2 text-base font-bold leading-snug text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-4 lg:py-2.5

Additional named exports from componentStyles.ts

These complement the nested button, card, form, hero, cta, and link objects in the table above.

min-h-[3.5rem] w-full rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white placeholder:text-slate-400 placeholder:font-normal !text-sm !leading-relaxed md:!text-base

mb-2 block text-sm font-bold sm:text-base text-slate-700

font-medium text-brand-blue underline decoration-brand-blue/50 underline-offset-[3px] transition-colors hover:text-brand-dark hover:decoration-brand-dark visited:text-violet-800 visited:decoration-violet-800/60 focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue

text-[15px] font-normal leading-relaxed text-slate-900

text-brand-blue text-base font-bold leading-snug sm:text-lg

mt-4 sm:mt-5

mt-1.5 text-balance text-[15px] font-normal leading-relaxed text-slate-900

mt-3 w-full text-center text-brand-blue text-base font-bold leading-snug sm:text-lg

text-balance text-center text-brand-blue text-base font-bold leading-snug sm:text-lg

mx-auto max-w-2xl text-balance text-center sm:max-w-3xl lg:whitespace-nowrap text-[15px] font-normal leading-relaxed text-slate-900

mx-auto max-w-lg text-center sm:max-w-2xl lg:max-w-3xl

mt-6 sm:mt-8

mt-2 text-[15px] font-normal leading-relaxed text-slate-900

bg-stone-50 border border-slate-200 rounded-t-xl

w-full overflow-hidden rounded-xl shadow-sm

w-full overflow-hidden rounded-xl shadow-sm

relative z-10 mx-auto px-4 pb-8 pt-10 sm:px-6 sm:pb-8 sm:pt-12 lg:px-8 lg:pt-14

text-slate-800

flex aspect-square max-h-12 w-full min-h-11 items-center justify-center rounded-lg sm:max-h-none sm:min-h-[2.75rem]

text-base font-semibold leading-snug text-brand-blue sm:text-lg

text-[10px] font-bold uppercase tracking-wide text-slate-600 sm:text-xs lg:text-[11px] xl:text-xs

hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1

hover:ring-brand-pink hover:bg-brand-pink hover:text-white focus-visible:ring-brand-pink focus-visible:bg-brand-pink focus-visible:text-white focus-visible:outline-none

border-0 bg-slate-50 ring-1 ring-inset ring-slate-200

border-2 border-brand-pink bg-brand-pink text-white shadow-md shadow-brand-pink/20

mb-1.5 sm:mb-2 lg:mb-3.5

flex h-11 min-h-11 w-full min-w-0 items-center justify-center rounded-lg px-0.5 sm:h-10 sm:min-h-[2.5rem] sm:px-1

text-sm font-medium leading-snug text-slate-800 sm:text-base

h-4 w-4 shrink-0

inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors text-slate-800 border-0 bg-slate-50 ring-1 ring-inset ring-slate-200 hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40

text-sm font-semibold leading-snug text-slate-800 sm:text-base

text-sm font-semibold leading-snug text-slate-800 sm:text-base

inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors text-slate-800 border-0 bg-slate-50 ring-1 ring-inset ring-slate-200 hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40

h-4 w-4 shrink-0

mb-5 flex flex-col gap-2 sm:mb-6 sm:gap-2

text-[15px] font-normal leading-relaxed text-slate-700 sm:text-base lg:text-[17px] lg:leading-relaxed

text-[15px] leading-relaxed text-blue-100 mb-8 sm:mb-10 xl:text-base xl:leading-relaxed xl:mb-10

h-5 w-5 shrink-0 xl:h-6 xl:w-6

text-[15px] font-normal leading-relaxed

text-base font-bold leading-snug sm:text-lg

bg-slate-100 text-brand-blue hover:bg-slate-200 hover:text-brand-blue

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 mt-5 px-5 lg:px-6 lg:shadow-lg

rounded-xl border border-slate-200/90 bg-slate-50/95 p-4 shadow-sm shadow-slate-200/35 md:p-5

mt-2 text-left text-base font-normal leading-relaxed text-slate-600 [text-wrap:pretty]

text-[15px] font-semibold leading-snug text-brand-blue [text-wrap:pretty]

inline-flex min-h-12 h-12 lg:h-12 w-auto max-w-full items-center rounded-xl bg-brand-blue px-3 py-0 shadow-lg shadow-brand-blue/25 transition-all sm:px-4 [&_button]:!h-12 [&_button]:!min-h-12 [&_button]:!py-0 [&_button]:!font-bold [&_button]:!leading-none

inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-blue text-xs font-bold text-white shadow-sm shadow-brand-blue/25

w-full min-w-0 sm:w-auto

mx-auto flex w-full max-w-full flex-col items-stretch gap-2 sm:w-max sm:flex-row sm:flex-wrap sm:items-center sm:justify-center sm:gap-3 md:gap-4

inline-flex w-full max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green px-3 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto sm:w-max sm:max-w-full sm:px-2 lg:h-12 lg:px-5 lg:py-0

inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green pl-2 pr-1.5 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto lg:h-12 lg:py-0 lg:pl-4 lg:pr-3

inline-flex max-w-full h-auto min-h-11 items-center rounded-xl bg-brand-green px-4 py-2 shadow-lg shadow-brand-green/25 lg:min-h-12 lg:px-5 lg:py-2.5

w-full pt-0 pb-3 sm:pt-0.5 sm:pb-4 md:pt-1 md:pb-5

w-full pt-0 pb-3 sm:pt-0.5 sm:pb-4 md:pt-1 md:pb-5 hidden min-[1360px]:block

text-base font-medium leading-relaxed md:text-lg xl:leading-relaxed

text-base font-medium leading-relaxed md:text-lg xl:leading-relaxed text-white/85

flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-sm font-bold leading-none text-white sm:h-9 sm:w-9 sm:text-base

text-[15px] font-normal leading-relaxed

mb-4 flex items-center gap-3.5 sm:gap-4

m-0 min-w-0 flex-1 text-base font-bold leading-snug sm:text-lg

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 max-xl:py-0 bg-brand-pink px-3 text-white shadow-md shadow-brand-pink/25 xl:px-4

max-xl:px-3 [&_svg]:max-xl:h-3.5 [&_svg]:max-xl:w-3.5

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5 text-center leading-snug whitespace-normal

mx-auto inline-grid w-max max-w-full grid-cols-2 gap-3

grid w-full grid-cols-2 gap-3

flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-blue text-[11px] font-bold leading-none tabular-nums text-white shadow-sm shadow-brand-blue/25

flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-[11px] font-bold leading-none tabular-nums text-white shadow-sm shadow-brand-pink/25

max-w-md sm:max-w-lg lg:max-w-5xl

max-w-md sm:max-w-lg lg:max-w-3xl

max-w-md sm:max-w-lg lg:max-w-none

max-w-md sm:max-w-lg lg:max-w-5xl

max-w-md sm:max-w-lg lg:max-w-[1200px]

mx-auto w-full max-w-md sm:max-w-lg lg:max-w-5xl

mx-auto w-full max-w-md sm:max-w-lg lg:max-w-3xl

mx-auto w-full max-w-md sm:max-w-lg lg:max-w-none

mx-auto w-full max-w-md sm:max-w-lg lg:max-w-5xl

font-bold text-brand-dark

text-base font-normal leading-relaxed text-slate-600

text-base font-normal leading-relaxed leading-snug text-slate-600

relative z-0 flex h-full w-full flex-col overflow-hidden rounded-xl border p-6 text-left font-bold text-white shadow-sm

text-sm font-medium leading-relaxed text-slate-300 sm:text-base md:text-lg

mb-5 flex flex-col gap-4 text-center sm:mb-6 sm:gap-4

relative z-20 -mt-5 mx-auto px-4 pb-8 pt-0 sm:-mt-8 sm:px-6 sm:pb-8 lg:px-8

relative z-20 -mt-2 mx-auto px-4 pb-8 pt-0 sm:mt-0 sm:px-6 sm:pb-8 lg:px-8

rounded-2xl border border-slate-100 bg-white px-5 pb-6 pt-7 shadow-xl shadow-slate-200/50 sm:p-8 md:p-10

text-balance text-brand-pink text-sm font-bold sm:text-base lg:text-lg

max-xl:py-0

w-full md:w-auto

grid grid-cols-1 gap-6 overflow-visible sm:gap-6 lg:grid-cols-3 lg:gap-6

fixed inset-x-0 bottom-0 z-50 flex justify-center border-t border-white/10 bg-brand-blue px-4 py-2 pb-[max(0.625rem,env(safe-area-inset-bottom))] shadow-[0_-4px_20px_rgba(0,94,184,0.28)] xl:hidden

mx-auto flex w-full max-w-md flex-col items-stretch justify-center sm:max-w-lg lg:max-w-none lg:flex-row lg:items-center lg:justify-center

inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-blue shadow-brand-blue/25 [&_button]:!font-bold

inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-green shadow-brand-green/25 [&_button]:!font-bold

min-h-12 h-12 lg:h-12

text-sm font-bold leading-none xl:text-base

inline-flex w-full min-w-0 sm:w-auto items-center justify-center gap-2 rounded-lg border-2 border-brand-blue bg-white px-4 text-sm font-bold leading-none text-brand-blue shadow-sm transition-colors hover:border-brand-blue hover:bg-brand-blue hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2 xl:rounded-xl min-h-12 h-12 lg:h-12 sm:px-6 lg:px-8

flex w-full flex-col items-center gap-7 sm:gap-8

mt-3 w-full max-w-md px-2 text-center text-sm italic text-white/85 sm:max-w-none sm:px-0 xl:whitespace-nowrap

mt-3 w-full max-w-md px-2 text-center text-sm italic text-slate-500 sm:max-w-none sm:px-0 xl:whitespace-nowrap

text-sm font-normal leading-relaxed sm:text-base

text-[15px] font-normal leading-relaxed

text-sm font-normal leading-relaxed sm:text-base

text-[15px] font-normal leading-relaxed text-slate-900

grid grid-cols-1 items-stretch gap-5 sm:gap-6 lg:grid-cols-3 lg:gap-6

flex h-full w-full flex-col rounded-xl border border-slate-200 bg-white p-6 text-center shadow-sm

mb-3 text-brand-blue text-base font-bold leading-snug sm:text-lg

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-4 lg:px-5

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow px-3 text-black shadow-md shadow-black/25 sm:px-4

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2 border-0 px-6 sm:px-8 outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2

inline-flex max-w-full items-center rounded-lg bg-white/12 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.08em] text-white ring-1 ring-inset ring-white/20 sm:text-[11px]

pointer-events-none inline-flex items-center justify-center rounded-lg bg-brand-pink px-4 py-1.5 text-xs font-bold leading-snug text-white shadow-sm shadow-brand-pink/25 group-hover:bg-brand-pink group-hover:text-white group-hover:no-underline sm:py-2 sm:text-sm

text-[15px] font-normal leading-relaxed

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

mb-7 flex flex-col gap-4 sm:mb-12 sm:gap-4 lg:mb-12

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

w-full min-w-0 lg:w-auto

mx-auto flex w-full max-w-md flex-col items-stretch justify-center gap-3 sm:max-w-lg lg:max-w-none lg:flex-row lg:items-center lg:justify-center lg:gap-4 xl:gap-5

scroll-mt-24 py-12 sm:py-20

scroll-mt-24 pt-8 pb-12 sm:pt-12 sm:pb-20

text-center text-[11px] font-medium leading-snug text-brand-pink underline-offset-2 transition-colors hover:underline sm:text-xs sm:font-bold

flex w-full flex-col gap-3 max-md:gap-4 max-md:pt-1

w-full max-md:overflow-hidden max-md:rounded-2xl max-md:bg-slate-50 max-md:px-3 max-md:pb-3 max-md:pt-2 sm:rounded-none sm:bg-transparent sm:p-0

max-md:mt-3 max-md:px-1.5

w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0

w-full max-md:py-2 sm:p-0

flex w-full flex-col max-md:gap-5 max-md:bg-white max-md:px-6 max-md:pt-4 max-md:pb-5 sm:gap-6

w-full rounded-xl px-3 py-4 sm:p-8

w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0

max-md:justify-center

w-full max-md:rounded-xl max-md:border-0 max-md:bg-slate-50 max-md:p-3 max-md:shadow-none rounded-xl border border-slate-200 bg-white p-3 shadow-sm sm:rounded-2xl sm:p-6

flex w-full flex-col max-md:gap-2 max-md:bg-white sm:gap-6

mb-1.5 flex items-baseline justify-between gap-2 text-[11px] leading-tight sm:text-sm

w-full max-md:px-3 max-md:py-3.5 sm:px-0 sm:py-3

text-center text-xs font-bold leading-snug text-brand-blue

grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-x-2

max-md:px-3

w-full sm:space-y-6 sm:rounded-2xl sm:border sm:border-slate-100 sm:bg-white sm:p-6 sm:shadow-xl sm:shadow-slate-200/50 md:space-y-8 md:p-8

w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2

w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2

overflow-hidden rounded-2xl bg-gradient-to-br from-brand-blue to-brand-dark p-6 text-white shadow-xl shadow-brand-blue/30

flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-xs font-bold leading-none text-white shadow-sm shadow-brand-pink/20 sm:h-7 sm:w-7 sm:text-sm

relative w-full min-h-11 overflow-hidden rounded-xl border border-slate-200 bg-white px-4 py-3 text-left text-sm font-medium text-slate-700 shadow-sm shadow-slate-200/40 transition-colors duration-150 hover:border-brand-blue hover:bg-slate-50 hover:text-slate-900 hover:shadow-md hover:ring-2 hover:ring-brand-blue/15 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base

relative w-full min-h-11 overflow-hidden rounded-xl border border-transparent bg-brand-blue px-4 py-3 text-left text-sm font-medium text-white shadow-md shadow-brand-blue/25 ring-2 ring-brand-blue/25 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base

rounded-xl bg-brand-green p-6 shadow-md shadow-brand-green/20

rounded-xl bg-red-800 p-6 shadow-md shadow-red-950/25

h-full rounded-[2px] bg-brand-blue transition-all duration-300

h-2.5 w-full overflow-hidden rounded-[2px] bg-slate-200

text-xs font-medium text-slate-600 sm:text-sm

text-xs font-bold text-brand-blue sm:text-sm

mt-2 text-xs font-medium leading-snug text-brand-pink sm:text-base sm:leading-relaxed

border-b border-brand-blue bg-brand-blue px-6 py-5 md:px-8 md:py-6

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl inline-flex items-center justify-center gap-2 w-full min-w-0 sm:w-auto

inline-flex shrink-0 items-center whitespace-nowrap rounded-lg bg-white/15 px-3 py-2 text-sm font-semibold text-white/95 max-sm:px-2.5 max-sm:py-1.5 max-sm:text-xs

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2

text-brand-blue text-base font-bold leading-snug sm:text-lg md:text-xl

inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm underline underline-offset-2

shrink-0 rounded-lg px-2 py-1.5 text-center text-[11px] font-normal leading-snug transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-pink focus-visible:ring-offset-2 max-md:px-2.5 max-md:py-2 max-md:text-xs sm:rounded-lg sm:px-2 sm:py-2 sm:text-xs lg:flex-1 lg:px-2.5 lg:py-2 lg:text-sm

flex gap-1 overflow-x-auto overscroll-x-contain pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:grid sm:grid-cols-3 sm:gap-1.5 sm:overflow-visible sm:pb-0 lg:flex lg:gap-2

max-md:!rounded-none max-md:!bg-transparent max-md:!p-0 max-md:!shadow-none

mt-2.5 text-center text-[11px] font-medium text-slate-500 sm:hidden

px-3 pb-4 pt-0 sm:px-4 sm:pb-6 sm:pt-1

mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white/95 shadow-md shadow-slate-200/60 max-md:static max-md:shadow-sm md:sticky md:top-[4.5rem] md:z-30 md:backdrop-blur-sm lg:top-28

px-3 pb-2 pt-2.5 sm:px-3 sm:pb-2.5 sm:pt-3

inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm

rounded-xl bg-brand-green px-4 py-4 shadow-sm shadow-brand-green/20 sm:px-5 sm:py-5

grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:gap-3

inline-flex shrink-0 items-center justify-center rounded-lg border border-slate-700 bg-white px-2.5 py-2 text-center text-xs font-bold leading-snug text-slate-700 shadow-sm transition-colors hover:bg-slate-50 sm:px-4 sm:py-2 sm:text-sm

inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-brand-pink px-2.5 py-2 text-center text-xs font-bold leading-snug text-white shadow-md shadow-brand-pink/20 transition-colors hover:bg-brand-pink/90 sm:px-4 sm:py-2 sm:text-sm

flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-3

flex w-full items-center justify-between gap-2

text-xs font-normal leading-snug text-slate-600 sm:text-sm

inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm

inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base

inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base bg-brand-pink text-white shadow-brand-pink/20 disabled:cursor-not-allowed disabled:opacity-50

text-xl font-bold text-white sm:text-2xl lg:text-3xl

inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm

underline underline-offset-2

mt-0.5 h-3.5 w-3.5 shrink-0 sm:h-5 sm:w-5

flex flex-col gap-y-2 sm:gap-y-3

text-sm font-normal leading-relaxed sm:text-base

text-balance text-sm font-normal leading-relaxed text-slate-900 sm:text-base md:text-lg

Complete catalog JSON (for copy-paste)

Duplicate of catalog.json, embedded for tools that only scrape HTML.

{
  "meta": {
    "generatedAt": "2026-07-11T11:04:53.075Z",
    "spaVisualReferencePath": "/design-system",
    "staticHtmlPath": "/design-system-ai",
    "staticJsonPath": "/regicare-design-system/catalog.json",
    "staticMarkdownPath": "/regicare-design-system/catalog.md",
    "sourceOfTruth": "src/design-system/tokens.ts, colours.ts, typography.ts, layout.ts, componentStyles.ts; page: src/pages/DesignSystemPage.tsx"
  },
  "tokens": {
    "color": {
      "brand": {
        "primary": "#005EB8",
        "accent": "#E6399B",
        "support": "#059669",
        "deep": "#152238"
      },
      "action": {
        "primary": "#FFBE00",
        "secondary": "#E6399B",
        "support": "#059669"
      },
      "surface": {
        "page": "#F9F9F9",
        "base": "#FFFFFF",
        "subtle": "#F8FAFC",
        "subtleStrong": "#F1F5F9",
        "hero": "#005EB8",
        "overlay": "rgba(0, 0, 0, 0.5)"
      },
      "text": {
        "primary": "#0F172A",
        "secondary": "#334155",
        "muted": "#475569",
        "inversePrimary": "#FFFFFF",
        "inverseMuted": "rgba(255, 255, 255, 0.85)",
        "linkAccent": "#E6399B"
      },
      "border": {
        "default": "#E2E8F0",
        "subtle": "#F1F5F9",
        "accent": "#E6399B",
        "inverseSoft": "rgba(255, 255, 255, 0.2)"
      }
    },
    "typography": {
      "font": {
        "family": {
          "base": "\"Open Sans\", ui-sans-serif, system-ui, sans-serif"
        },
        "weight": {
          "body": 400,
          "medium": 500,
          "strong": 700
        }
      },
      "weight": {
        "body": "font-normal",
        "medium": "font-medium",
        "strong": "font-bold"
      },
      "size": {
        "heroTitle": "text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl",
        "sectionTitle": "text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl",
        "cardTitle": "text-base font-bold leading-snug sm:text-lg md:text-2xl",
        "pinkSubhead": "text-sm font-bold sm:text-base lg:text-lg",
        "pinkSubheadSection": "text-sm font-normal sm:text-base lg:text-lg",
        "heroSupportingOnPhoto": "text-[14px] font-medium leading-relaxed text-slate-900 sm:text-[15px] sm:font-semibold sm:text-base lg:text-[17px] lg:font-semibold lg:text-slate-900 xl:text-lg xl:font-semibold xl:leading-relaxed",
        "bodyReading": "text-base font-normal leading-relaxed",
        "bodyDefault": "text-base font-normal leading-relaxed",
        "bodyLarge": "text-base font-normal leading-relaxed md:text-lg",
        "bodyCompact": "text-[15px] font-normal leading-relaxed",
        "sectionIntro": "text-base font-medium leading-relaxed",
        "sectionIntroCompact": "text-sm font-normal leading-relaxed text-slate-900 sm:text-base md:text-lg",
        "bulletCompact": "text-sm font-normal leading-relaxed sm:text-base",
        "labelSmall": "text-base font-bold",
        "helper": "text-base font-normal",
        "widgetIntroTitle": "text-base font-bold leading-tight text-brand-blue sm:text-lg md:text-2xl md:leading-tight lg:text-3xl",
        "widgetResultTitle": "text-base font-bold text-brand-blue sm:text-xl",
        "widgetOutcomeTitle": "text-lg font-bold leading-snug text-white [text-wrap:pretty] sm:text-2xl",
        "widgetPanelTitle": "text-sm font-bold sm:text-base",
        "widgetBreakdownTitle": "text-base font-bold text-brand-blue sm:text-lg",
        "widgetBreakdownIntro": "text-sm font-normal leading-relaxed text-slate-700 sm:text-base",
        "widgetLeadCaptureTitle": "text-base font-bold text-brand-blue sm:text-lg",
        "actionPlanPageTitle": "text-base font-bold text-brand-blue sm:text-xl lg:text-2xl",
        "actionPlanSectionTitle": "text-base font-bold leading-snug sm:text-lg md:text-xl",
        "actionPlanPanelHeading": "text-sm font-normal text-brand-blue sm:text-base md:text-lg",
        "actionPlanBody": "text-sm font-normal leading-relaxed md:text-base",
        "actionPlanBandTitle": "text-lg font-bold leading-snug text-white [text-wrap:pretty] sm:text-2xl",
        "actionPlanBandBody": "text-sm leading-relaxed"
      },
      "layout": {
        "troubleBulletList": "flex flex-col gap-y-2 sm:gap-y-3",
        "troubleBulletIcon": "mt-0.5 h-3.5 w-3.5 shrink-0 sm:h-5 sm:w-5"
      }
    },
    "typeScale": {
      "heroTitle": "text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl",
      "sectionTitle": "text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl",
      "cardTitle": "text-base font-bold leading-snug sm:text-lg md:text-2xl",
      "pinkSubhead": "text-sm font-bold sm:text-base lg:text-lg",
      "heroSupportingOnPhoto": "text-[14px] font-medium leading-relaxed text-slate-900 sm:text-[15px] sm:font-semibold sm:text-base lg:text-[17px] lg:font-semibold lg:text-slate-900 xl:text-lg xl:font-semibold xl:leading-relaxed",
      "body": "text-base font-normal leading-relaxed",
      "bodyLarge": "text-base font-normal leading-relaxed md:text-lg",
      "bodyCompact": "text-[15px] font-normal leading-relaxed",
      "sectionIntro": "text-base font-medium leading-relaxed"
    },
    "prose": {
      "legal": "text-base font-normal leading-relaxed text-slate-600",
      "legalCompact": "text-base font-normal leading-relaxed leading-snug text-slate-600",
      "reviewCard": "text-[15px] font-normal leading-relaxed",
      "pathwaySituation": "text-sm font-normal leading-relaxed sm:text-base",
      "pathwayHelp": "text-[15px] font-normal leading-relaxed"
    },
    "toolUi": {
      "label": "text-base font-normal leading-relaxed font-bold text-slate-600",
      "labelBrandBlue": "text-base font-normal leading-relaxed font-bold text-brand-blue",
      "labelBrandPink": "text-base font-normal leading-relaxed font-bold text-brand-pink",
      "body": "text-base font-normal leading-relaxed text-slate-700",
      "bodyList": "text-base font-normal leading-relaxed leading-relaxed text-slate-700",
      "control": "text-base font-normal leading-relaxed font-bold",
      "inputAffix": "text-base font-normal leading-relaxed text-slate-500",
      "summaryRow": "text-base font-normal leading-relaxed"
    },
    "toolStepTab": {
      "rail": "rounded-xl bg-white p-1",
      "idle": "border border-slate-300 bg-white text-slate-600 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-800",
      "idleEmbedded": "border border-slate-300 bg-white text-slate-600 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-800",
      "active": "border border-transparent bg-brand-pink font-medium text-white shadow-sm shadow-brand-pink/20",
      "complete": "border border-transparent bg-brand-green font-medium text-white shadow-sm shadow-brand-green/20",
      "completeDot": "bg-brand-green",
      "panel": "rounded-2xl bg-slate-50",
      "panelHeading": "text-brand-blue",
      "panelDescText": "text-slate-700 leading-relaxed"
    },
    "spacing": {
      "section": {
        "standard": "py-12 sm:py-20",
        "standardBottom": "pb-24",
        "heroTopOffset": "pt-20 sm:pt-28 lg:pt-32"
      },
      "container": {
        "inline": "px-5 sm:px-8 lg:px-10 xl:px-12"
      },
      "card": {
        "standardPadding": "p-8 md:p-10"
      }
    },
    "container": {
      "site": "max-w-7xl",
      "reading": "max-w-5xl",
      "detail": "max-w-[1080px]",
      "heroWide": "max-w-[1200px]",
      "prose": "max-w-4xl"
    },
    "radius": {
      "control": "rounded-xl",
      "card": "rounded-2xl",
      "cardProminent": "rounded-3xl",
      "badge": "rounded-lg",
      "badgeCompact": "rounded-lg"
    },
    "shadow": {
      "surface": {
        "default": "shadow-xl shadow-slate-200/50",
        "soft": "shadow-sm"
      },
      "action": {
        "primary": "shadow-lg shadow-black/20",
        "secondary": "shadow-lg shadow-brand-pink/20"
      },
      "overlay": {
        "modal": "shadow-2xl"
      }
    },
    "button": {
      "primary": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
      "secondary": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
      "support": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-green px-6 text-white shadow-lg shadow-brand-green/20 lg:px-10 lg:shadow-xl w-full md:w-auto",
      "neutral": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 border border-slate-200 bg-white px-6 text-slate-700 hover:bg-slate-50 lg:px-10 w-full md:w-auto",
      "text": "inline-flex items-center justify-center text-sm font-bold text-brand-pink underline-offset-4 transition-all hover:underline"
    },
    "card": {
      "default": "rounded-2xl border border-slate-100 bg-white p-8 md:p-10 shadow-xl shadow-slate-200/50",
      "prominent": "rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50",
      "subtle": "rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-sm",
      "inverse": "rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm",
      "interactiveDirectory": "group flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-6 transition-all hover:border-brand-blue hover:bg-brand-blue hover:shadow-md",
      "interactiveDirectoryFeatured": "group flex h-full flex-col rounded-2xl border border-brand-green bg-brand-green p-6 shadow-md shadow-brand-green/20 transition-all hover:brightness-105",
      "interactiveDirectoryTitle": "text-xl font-bold leading-snug text-brand-blue transition-colors group-hover:text-white sm:text-2xl",
      "interactiveDirectoryTitleFeatured": "text-lg font-bold leading-snug text-white md:text-xl lg:text-2xl",
      "interactiveDirectoryHeadline": "text-lg font-bold leading-snug text-brand-pink transition-colors group-hover:text-white sm:text-xl",
      "interactiveDirectoryHeadlineFeatured": "mb-3 text-sm font-bold leading-snug text-white md:text-base",
      "interactiveDirectoryBody": "text-base font-normal leading-relaxed text-slate-600 transition-colors group-hover:text-white/90",
      "interactiveDirectoryBodyFeatured": "text-base font-normal leading-relaxed mb-6 flex-grow font-normal leading-relaxed text-white/90 md:text-base",
      "interactiveDirectoryAction": "inline-flex items-center text-left text-sm font-bold text-brand-pink underline-offset-4 transition-colors hover:underline group-hover:text-white group-hover:underline",
      "interactiveDirectoryActionFeatured": "inline-flex items-center text-left text-sm font-bold text-white underline-offset-4 hover:underline"
    },
    "form": {
      "label": "mb-2 block text-base font-normal leading-relaxed font-bold text-slate-700",
      "input": "min-h-[3.5rem] w-full rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white placeholder:text-slate-400 placeholder:font-normal",
      "selectTrigger": "flex min-h-[3.5rem] w-full items-center rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-left text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white",
      "inputError": "ring-2 ring-brand-pink focus:ring-2 focus:ring-brand-pink",
      "helpText": "mt-1.5 text-base font-normal leading-relaxed text-slate-600",
      "errorText": "mt-1.5 text-base font-normal leading-relaxed font-medium text-brand-pink"
    },
    "hero": {
      "section": {
        "base": "relative overflow-x-clip bg-brand-blue px-4 pb-20 pt-20 text-white sm:px-6 sm:pt-28 lg:px-8 lg:pt-32",
        "page": "relative overflow-x-clip bg-brand-blue px-4 pb-14 pt-10 text-white sm:px-6 sm:pb-20 sm:pt-14 lg:px-8 lg:pt-20",
        "pageLight": "relative overflow-x-clip bg-white px-4 pb-14 pt-10 text-slate-900 sm:px-6 sm:pb-20 sm:pt-14 lg:px-8 lg:pt-20",
        "pageCompact": "relative overflow-x-clip bg-brand-blue px-4 pb-10 pt-8 text-white sm:px-6 sm:pb-12 sm:pt-10 lg:px-8 lg:pb-14 lg:pt-14"
      },
      "title": "text-xl font-bold leading-tight tracking-tight sm:text-2xl md:text-4xl lg:text-5xl",
      "subtitle": "text-base font-medium leading-relaxed text-slate-200 md:text-lg",
      "overlapCardOffset": "-mt-8"
    },
    "cta": {
      "section": {
        "default": "relative overflow-hidden bg-brand-blue py-14 text-white sm:py-20",
        "inlineBand": "relative overflow-hidden rounded-2xl bg-brand-blue p-8 text-white shadow-xl sm:p-10 md:p-12 xl:p-14"
      },
      "title": "text-lg font-bold leading-tight sm:text-xl md:text-3xl lg:text-4xl",
      "body": "text-base leading-relaxed text-white/85 sm:text-lg"
    },
    "link": {
      "serviceDestination": "group inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-bold leading-snug text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white sm:text-base lg:px-5 lg:py-3",
      "serviceDestinationActive": "inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-brand-blue bg-brand-blue px-4 py-2.5 text-base font-bold text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-5 lg:py-3",
      "serviceDestinationIcon": "h-4 w-4 shrink-0 text-brand-blue transition-transform group-hover:translate-x-0.5 group-hover:text-white lg:h-5 lg:w-5",
      "serviceDestinationIconActive": "h-4 w-4 shrink-0 text-white lg:h-5 lg:w-5",
      "serviceDestinationNav": "group inline-flex min-w-0 w-full items-center rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-base font-bold leading-snug text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white lg:px-4 lg:py-2.5",
      "serviceDestinationNavActive": "inline-flex min-w-0 w-full items-center rounded-lg border border-brand-blue bg-brand-blue px-3 py-2 text-base font-bold leading-snug text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-4 lg:py-2.5"
    }
  },
  "additionalComponentStyles": {
    "actionPlanFormInput": "min-h-[3.5rem] w-full rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white placeholder:text-slate-400 placeholder:font-normal !text-sm !leading-relaxed md:!text-base",
    "actionPlanFormLabel": "mb-2 block text-sm font-bold sm:text-base text-slate-700",
    "bodyHyperlink": "font-medium text-brand-blue underline decoration-brand-blue/50 underline-offset-[3px] transition-colors hover:text-brand-dark hover:decoration-brand-dark visited:text-violet-800 visited:decoration-violet-800/60 focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue",
    "bookingDiscoveryBlockBody": "text-[15px] font-normal leading-relaxed text-slate-900",
    "bookingDiscoveryBlockHeading": "text-brand-blue text-base font-bold leading-snug sm:text-lg",
    "bookingDiscoveryCardStackGap": "mt-4 sm:mt-5",
    "bookingDiscoveryExpertBio": "mt-1.5 text-balance text-[15px] font-normal leading-relaxed text-slate-900",
    "bookingDiscoveryExpertName": "mt-3 w-full text-center text-brand-blue text-base font-bold leading-snug sm:text-lg",
    "bookingDiscoveryExpertsLead": "text-balance text-center text-brand-blue text-base font-bold leading-snug sm:text-lg",
    "bookingDiscoveryExpertsReassurance": "mx-auto max-w-2xl text-balance text-center sm:max-w-3xl lg:whitespace-nowrap text-[15px] font-normal leading-relaxed text-slate-900",
    "bookingDiscoveryExpertsShell": "mx-auto max-w-lg text-center sm:max-w-2xl lg:max-w-3xl",
    "bookingDiscoveryExpertsShellOffset": "mt-6 sm:mt-8",
    "bookingDiscoveryStatLabel": "mt-2 text-[15px] font-normal leading-relaxed text-slate-900",
    "bookingEmbeddedLandingPickerBody": "bg-stone-50 border border-slate-200 rounded-t-xl",
    "bookingEmbeddedLandingPickerCard": "w-full overflow-hidden rounded-xl shadow-sm",
    "bookingEmbeddedLandingPickerShell": "w-full overflow-hidden rounded-xl shadow-sm",
    "bookingPageContentBelowHero": "relative z-10 mx-auto px-4 pb-8 pt-10 sm:px-6 sm:pb-8 sm:pt-12 lg:px-8 lg:pt-14",
    "bookingPickerControlText": "text-slate-800",
    "bookingPickerDayCell": "flex aspect-square max-h-12 w-full min-h-11 items-center justify-center rounded-lg sm:max-h-none sm:min-h-[2.75rem]",
    "bookingPickerHeading": "text-base font-semibold leading-snug text-brand-blue sm:text-lg",
    "bookingPickerMetaLabel": "text-[10px] font-bold uppercase tracking-wide text-slate-600 sm:text-xs lg:text-[11px] xl:text-xs",
    "bookingPickerNavButtonHover": "hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1",
    "bookingPickerSelectableHover": "hover:ring-brand-pink hover:bg-brand-pink hover:text-white focus-visible:ring-brand-pink focus-visible:bg-brand-pink focus-visible:text-white focus-visible:outline-none",
    "bookingPickerSelectableIdle": "border-0 bg-slate-50 ring-1 ring-inset ring-slate-200",
    "bookingPickerSelectableSelected": "border-2 border-brand-pink bg-brand-pink text-white shadow-md shadow-brand-pink/20",
    "bookingPickerTimeBandHeading": "mb-1.5 sm:mb-2 lg:mb-3.5",
    "bookingPickerTimeCell": "flex h-11 min-h-11 w-full min-w-0 items-center justify-center rounded-lg px-0.5 sm:h-10 sm:min-h-[2.5rem] sm:px-1",
    "bookingPickerValue": "text-sm font-medium leading-snug text-slate-800 sm:text-base",
    "bookingPinkBackChevron": "h-4 w-4 shrink-0",
    "bookingPinkBackSquareButton": "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors text-slate-800 border-0 bg-slate-50 ring-1 ring-inset ring-slate-200 hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40",
    "bookingSlotConfirmation": "text-sm font-semibold leading-snug text-slate-800 sm:text-base",
    "bookingSlotDateTimeLabel": "text-sm font-semibold leading-snug text-slate-800 sm:text-base",
    "calendarNavButton": "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors text-slate-800 border-0 bg-slate-50 ring-1 ring-inset ring-slate-200 hover:ring-slate-300 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40",
    "calendarNavChevron": "h-4 w-4 shrink-0",
    "compactSectionHeadingBlock": "mb-5 flex flex-col gap-2 sm:mb-6 sm:gap-2",
    "cqcLandingBodyCopy": "text-[15px] font-normal leading-relaxed text-slate-700 sm:text-base lg:text-[17px] lg:leading-relaxed",
    "ctaBodyIntro": "text-[15px] leading-relaxed text-blue-100 mb-8 sm:mb-10 xl:text-base xl:leading-relaxed xl:mb-10",
    "ctaLeadingIcon": "h-5 w-5 shrink-0 xl:h-6 xl:w-6",
    "denseGridCardBody": "text-[15px] font-normal leading-relaxed",
    "denseGridCardTitle": "text-base font-bold leading-snug sm:text-lg",
    "faqAnswerModeToggleInactiveTab": "bg-slate-100 text-brand-blue hover:bg-slate-200 hover:text-brand-blue",
    "faqShortAnswerBookCallButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 mt-5 px-5 lg:px-6 lg:shadow-lg",
    "faqShortAnswerHelpPromptCard": "rounded-xl border border-slate-200/90 bg-slate-50/95 p-4 shadow-sm shadow-slate-200/35 md:p-5",
    "faqShortAnswerHelpPromptCardBody": "mt-2 text-left text-base font-normal leading-relaxed text-slate-600 [text-wrap:pretty]",
    "faqShortAnswerHelpPromptCardHeading": "text-[15px] font-semibold leading-snug text-brand-blue [text-wrap:pretty]",
    "filterDropdownShellFit": "inline-flex min-h-12 h-12 lg:h-12 w-auto max-w-full items-center rounded-xl bg-brand-blue px-3 py-0 shadow-lg shadow-brand-blue/25 transition-all sm:px-4 [&_button]:!h-12 [&_button]:!min-h-12 [&_button]:!py-0 [&_button]:!font-bold [&_button]:!leading-none",
    "guideSectionNumberBadge": "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-blue text-xs font-bold text-white shadow-sm shadow-brand-blue/25",
    "heroDualCtaButtonWidth": "w-full min-w-0 sm:w-auto",
    "heroNavButtonRow": "mx-auto flex w-full max-w-full flex-col items-stretch gap-2 sm:w-max sm:flex-row sm:flex-wrap sm:items-center sm:justify-center sm:gap-3 md:gap-4",
    "heroNavGreenShell": "inline-flex w-full max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green px-3 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto sm:w-max sm:max-w-full sm:px-2 lg:h-12 lg:px-5 lg:py-0",
    "heroNavGreenShellCenter": "inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green pl-2 pr-1.5 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto lg:h-12 lg:py-0 lg:pl-4 lg:pr-3",
    "heroNavGreenShellForm": "inline-flex max-w-full h-auto min-h-11 items-center rounded-xl bg-brand-green px-4 py-2 shadow-lg shadow-brand-green/25 lg:min-h-12 lg:px-5 lg:py-2.5",
    "heroNavSlot": "w-full pt-0 pb-3 sm:pt-0.5 sm:pb-4 md:pt-1 md:pb-5",
    "heroNavSlotDesktopOnly": "w-full pt-0 pb-3 sm:pt-0.5 sm:pb-4 md:pt-1 md:pb-5 hidden min-[1360px]:block",
    "heroSupportingLead": "text-base font-medium leading-relaxed md:text-lg xl:leading-relaxed",
    "heroSupportingLeadOnBlue": "text-base font-medium leading-relaxed md:text-lg xl:leading-relaxed text-white/85",
    "howItWorksStepBadge": "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-sm font-bold leading-none text-white sm:h-9 sm:w-9 sm:text-base",
    "howItWorksStepBody": "text-[15px] font-normal leading-relaxed",
    "howItWorksStepRow": "mb-4 flex items-center gap-3.5 sm:gap-4",
    "howItWorksStepTitle": "m-0 min-w-0 flex-1 text-base font-bold leading-snug sm:text-lg",
    "inlineNavPinkButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5",
    "inlineNavPinkButtonCarousel": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5",
    "inlineNavPinkButtonHeaderMenu": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 max-xl:py-0 bg-brand-pink px-3 text-white shadow-md shadow-brand-pink/25 xl:px-4",
    "inlineNavPinkButtonHeroToolMobile": "max-xl:px-3 [&_svg]:max-xl:h-3.5 [&_svg]:max-xl:w-3.5",
    "inlineNavPinkButtonMulti": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5 text-center leading-snug whitespace-normal",
    "inlineNavPinkPairGrid": "mx-auto inline-grid w-max max-w-full grid-cols-2 gap-3",
    "inlineNavPinkPairGridFull": "grid w-full grid-cols-2 gap-3",
    "journeyMilestoneNumberBadge": "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-blue text-[11px] font-bold leading-none tabular-nums text-white shadow-sm shadow-brand-blue/25",
    "journeyMilestonePdfNumberBadge": "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-[11px] font-bold leading-none tabular-nums text-white shadow-sm shadow-brand-pink/25",
    "landingContentMaxBookingEmbedded": "max-w-md sm:max-w-lg lg:max-w-5xl",
    "landingContentMaxConstrainedDesktop": "max-w-md sm:max-w-lg lg:max-w-3xl",
    "landingContentMaxMobile": "max-w-md sm:max-w-lg lg:max-w-none",
    "landingContentMaxRecoverySection": "max-w-md sm:max-w-lg lg:max-w-5xl",
    "landingHeroContentMax": "max-w-md sm:max-w-lg lg:max-w-[1200px]",
    "landingProseColumnBookingEmbedded": "mx-auto w-full max-w-md sm:max-w-lg lg:max-w-5xl",
    "landingProseColumnConstrainedDesktop": "mx-auto w-full max-w-md sm:max-w-lg lg:max-w-3xl",
    "landingProseColumnMobile": "mx-auto w-full max-w-md sm:max-w-lg lg:max-w-none",
    "landingProseColumnRecoverySection": "mx-auto w-full max-w-md sm:max-w-lg lg:max-w-5xl",
    "legalCompanyDetailLabel": "font-bold text-brand-dark",
    "legalProseBody": "text-base font-normal leading-relaxed text-slate-600",
    "legalProseBodyCompact": "text-base font-normal leading-relaxed leading-snug text-slate-600",
    "marketingBenefitCardShell": "relative z-0 flex h-full w-full flex-col overflow-hidden rounded-xl border p-6 text-left font-bold text-white shadow-sm",
    "marketingHeroLead": "text-sm font-medium leading-relaxed text-slate-300 sm:text-base md:text-lg",
    "marketingPageCardHeadingBlock": "mb-5 flex flex-col gap-4 text-center sm:mb-6 sm:gap-4",
    "marketingPageCardOverlap": "relative z-20 -mt-5 mx-auto px-4 pb-8 pt-0 sm:-mt-8 sm:px-6 sm:pb-8 lg:px-8",
    "marketingPageCardOverlapLight": "relative z-20 -mt-2 mx-auto px-4 pb-8 pt-0 sm:mt-0 sm:px-6 sm:pb-8 lg:px-8",
    "marketingPageCardShell": "rounded-2xl border border-slate-100 bg-white px-5 pb-6 pt-7 shadow-xl shadow-slate-200/50 sm:p-8 md:p-10",
    "marketingPinkSubheadline": "text-balance text-brand-pink text-sm font-bold sm:text-base lg:text-lg",
    "mobileChromePillHeight": "max-xl:py-0",
    "mobileFullWidthCta": "w-full md:w-auto",
    "mobilePickerCardGrid": "grid grid-cols-1 gap-6 overflow-visible sm:gap-6 lg:grid-cols-3 lg:gap-6",
    "mobileStickyBookingBar": "fixed inset-x-0 bottom-0 z-50 flex justify-center border-t border-white/10 bg-brand-blue px-4 py-2 pb-[max(0.625rem,env(safe-area-inset-bottom))] shadow-[0_-4px_20px_rgba(0,94,184,0.28)] xl:hidden",
    "mobileStickyBookingBarInner": "mx-auto flex w-full max-w-md flex-col items-stretch justify-center sm:max-w-lg lg:max-w-none lg:flex-row lg:items-center lg:justify-center",
    "multiSelectFilterDropdownShell": {
      "whenSelectedFalse": "inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-blue shadow-brand-blue/25 [&_button]:!font-bold",
      "whenSelectedTrue": "inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-green shadow-brand-green/25 [&_button]:!font-bold"
    },
    "navPillHeight": "min-h-12 h-12 lg:h-12",
    "navPillText": "text-sm font-bold leading-none xl:text-base",
    "outlineBlueCtaButton": "inline-flex w-full min-w-0 sm:w-auto items-center justify-center gap-2 rounded-lg border-2 border-brand-blue bg-white px-4 text-sm font-bold leading-none text-brand-blue shadow-sm transition-colors hover:border-brand-blue hover:bg-brand-blue hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2 xl:rounded-xl min-h-12 h-12 lg:h-12 sm:px-6 lg:px-8",
    "pageHeroContentStack": "flex w-full flex-col items-center gap-7 sm:gap-8",
    "pageHeroCtaSupporting": "mt-3 w-full max-w-md px-2 text-center text-sm italic text-white/85 sm:max-w-none sm:px-0 xl:whitespace-nowrap",
    "pageHeroCtaSupportingOnLight": "mt-3 w-full max-w-md px-2 text-center text-sm italic text-slate-500 sm:max-w-none sm:px-0 xl:whitespace-nowrap",
    "pageOverviewBody": "text-sm font-normal leading-relaxed sm:text-base",
    "pathwayHelpRecommendation": "text-[15px] font-normal leading-relaxed",
    "pathwaySituationBody": "text-sm font-normal leading-relaxed sm:text-base",
    "plainInfoCardBody": "text-[15px] font-normal leading-relaxed text-slate-900",
    "plainInfoCardGrid": "grid grid-cols-1 items-stretch gap-5 sm:gap-6 lg:grid-cols-3 lg:gap-6",
    "plainInfoCardShell": "flex h-full w-full flex-col rounded-xl border border-slate-200 bg-white p-6 text-center shadow-sm",
    "plainInfoCardTitle": "mb-3 text-brand-blue text-base font-bold leading-snug sm:text-lg",
    "primaryYellowButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
    "primaryYellowButtonHeader": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-4 lg:px-5",
    "primaryYellowButtonHeaderMobile": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow px-3 text-black shadow-md shadow-black/25 sm:px-4",
    "primaryYellowButtonOnLight": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2 border-0 px-6 sm:px-8 outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2",
    "regicareBlueHeaderTopicBadge": "inline-flex max-w-full items-center rounded-lg bg-white/12 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.08em] text-white ring-1 ring-inset ring-white/20 sm:text-[11px]",
    "resourceDirectoryOpenButton": "pointer-events-none inline-flex items-center justify-center rounded-lg bg-brand-pink px-4 py-1.5 text-xs font-bold leading-snug text-white shadow-sm shadow-brand-pink/25 group-hover:bg-brand-pink group-hover:text-white group-hover:no-underline sm:py-2 sm:text-sm",
    "reviewCardBody": "text-[15px] font-normal leading-relaxed",
    "secondaryPinkCtaButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
    "sectionHeadingBlock": "mb-7 flex flex-col gap-4 sm:mb-12 sm:gap-4 lg:mb-12",
    "solidPinkActionButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl",
    "solidPinkCtaButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
    "stackedCtaButtonWidth": "w-full min-w-0 lg:w-auto",
    "stackedCtaShell": "mx-auto flex w-full max-w-md flex-col items-stretch justify-center gap-3 sm:max-w-lg lg:max-w-none lg:flex-row lg:items-center lg:justify-center lg:gap-4 xl:gap-5",
    "standardSectionPadding": "scroll-mt-24 py-12 sm:py-20",
    "standardSectionPaddingCompactTop": "scroll-mt-24 pt-8 pb-12 sm:pt-12 sm:pb-20",
    "toolDevPreviewSkipLink": "text-center text-[11px] font-medium leading-snug text-brand-pink underline-offset-2 transition-colors hover:underline sm:text-xs sm:font-bold",
    "toolEmbeddedChromeBody": "flex w-full flex-col gap-3 max-md:gap-4 max-md:pt-1",
    "toolEmbeddedChromeCard": "w-full max-md:overflow-hidden max-md:rounded-2xl max-md:bg-slate-50 max-md:px-3 max-md:pb-3 max-md:pt-2 sm:rounded-none sm:bg-transparent sm:p-0",
    "toolEmbeddedChromeProgressInset": "max-md:mt-3 max-md:px-1.5",
    "toolEmbeddedGreySection": "w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0",
    "toolEmbeddedIntroBody": "w-full max-md:py-2 sm:p-0",
    "toolEmbeddedIntroStack": "flex w-full flex-col max-md:gap-5 max-md:bg-white max-md:px-6 max-md:pt-4 max-md:pb-5 sm:gap-6",
    "toolEmbeddedPanelPadding": "w-full rounded-xl px-3 py-4 sm:p-8",
    "toolEmbeddedQuestionBlock": "w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0",
    "toolEmbeddedResultActions": "max-md:justify-center",
    "toolEmbeddedSectionShell": "w-full max-md:rounded-xl max-md:border-0 max-md:bg-slate-50 max-md:p-3 max-md:shadow-none rounded-xl border border-slate-200 bg-white p-3 shadow-sm sm:rounded-2xl sm:p-6",
    "toolEmbeddedStack": "flex w-full flex-col max-md:gap-2 max-md:bg-white sm:gap-6",
    "toolEmbeddedSubscoreLabelRow": "mb-1.5 flex items-baseline justify-between gap-2 text-[11px] leading-tight sm:text-sm",
    "toolEmbeddedToolbarBand": "w-full max-md:px-3 max-md:py-3.5 sm:px-0 sm:py-3",
    "toolEmbeddedToolbarCenterLabel": "text-center text-xs font-bold leading-snug text-brand-blue",
    "toolEmbeddedToolbarGrid": "grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-x-2",
    "toolEmbeddedToolbarRowInset": "max-md:px-3",
    "toolEmbeddedWizardFormShell": "w-full sm:space-y-6 sm:rounded-2xl sm:border sm:border-slate-100 sm:bg-white sm:p-6 sm:shadow-xl sm:shadow-slate-200/50 md:space-y-8 md:p-8",
    "toolEmbeddedWizardNavBand": "w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2",
    "toolEmbeddedWizardNavRow": "w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2",
    "toolGradientCtaBand": "overflow-hidden rounded-2xl bg-gradient-to-br from-brand-blue to-brand-dark p-6 text-white shadow-xl shadow-brand-blue/30",
    "toolInstructionNumberBadge": "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand-pink text-xs font-bold leading-none text-white shadow-sm shadow-brand-pink/20 sm:h-7 sm:w-7 sm:text-sm",
    "toolOptionRowIdle": "relative w-full min-h-11 overflow-hidden rounded-xl border border-slate-200 bg-white px-4 py-3 text-left text-sm font-medium text-slate-700 shadow-sm shadow-slate-200/40 transition-colors duration-150 hover:border-brand-blue hover:bg-slate-50 hover:text-slate-900 hover:shadow-md hover:ring-2 hover:ring-brand-blue/15 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base",
    "toolOptionRowSelected": "relative w-full min-h-11 overflow-hidden rounded-xl border border-transparent bg-brand-blue px-4 py-3 text-left text-sm font-medium text-white shadow-md shadow-brand-blue/25 ring-2 ring-brand-blue/25 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base",
    "toolOutcomePanelPositive": "rounded-xl bg-brand-green p-6 shadow-md shadow-brand-green/20",
    "toolOutcomePanelRisk": "rounded-xl bg-red-800 p-6 shadow-md shadow-red-950/25",
    "toolProgressBarFill": "h-full rounded-[2px] bg-brand-blue transition-all duration-300",
    "toolProgressBarTrack": "h-2.5 w-full overflow-hidden rounded-[2px] bg-slate-200",
    "toolProgressMeta": "text-xs font-medium text-slate-600 sm:text-sm",
    "toolProgressPrimary": "text-xs font-bold text-brand-blue sm:text-sm",
    "toolQuestionGuidanceHint": "mt-2 text-xs font-medium leading-snug text-brand-pink sm:text-base sm:leading-relaxed",
    "toolResultHeaderBand": "border-b border-brand-blue bg-brand-blue px-6 py-5 md:px-8 md:py-6",
    "toolResultSnapshotEmailSentChip": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl inline-flex items-center justify-center gap-2 w-full min-w-0 sm:w-auto",
    "toolResultSnapshotMetricChip": "inline-flex shrink-0 items-center whitespace-nowrap rounded-lg bg-white/15 px-3 py-2 text-sm font-semibold text-white/95 max-sm:px-2.5 max-sm:py-1.5 max-sm:text-xs",
    "toolResultYellowCtaButton": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
    "toolResultYellowCtaButtonCompact": "inline-flex shrink-0 items-center justify-center rounded-lg xl:rounded-xl text-sm font-bold leading-none xl:text-base leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full min-w-0 lg:w-auto inline-flex items-center justify-center gap-2",
    "toolSectionCardTitle": "text-brand-blue text-base font-bold leading-snug sm:text-lg md:text-xl",
    "toolStartAgainLink": "inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm underline underline-offset-2",
    "toolStepTabButton": "shrink-0 rounded-lg px-2 py-1.5 text-center text-[11px] font-normal leading-snug transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-pink focus-visible:ring-offset-2 max-md:px-2.5 max-md:py-2 max-md:text-xs sm:rounded-lg sm:px-2 sm:py-2 sm:text-xs lg:flex-1 lg:px-2.5 lg:py-2 lg:text-sm",
    "toolStepTabList": "flex gap-1 overflow-x-auto overscroll-x-contain pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:grid sm:grid-cols-3 sm:gap-1.5 sm:overflow-visible sm:pb-0 lg:flex lg:gap-2",
    "toolStepTabRailEmbeddedMobile": "max-md:!rounded-none max-md:!bg-transparent max-md:!p-0 max-md:!shadow-none",
    "toolStepTabScrollHint": "mt-2.5 text-center text-[11px] font-medium text-slate-500 sm:hidden",
    "toolStickyChromeProgressPad": "px-3 pb-4 pt-0 sm:px-4 sm:pb-6 sm:pt-1",
    "toolStickyChromeShell": "mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white/95 shadow-md shadow-slate-200/60 max-md:static max-md:shadow-sm md:sticky md:top-[4.5rem] md:z-30 md:backdrop-blur-sm lg:top-28",
    "toolStickyChromeTabsPad": "px-3 pb-2 pt-2.5 sm:px-3 sm:pb-2.5 sm:pt-3",
    "toolSubtleNavButton": "inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm",
    "toolSupportCallout": "rounded-xl bg-brand-green px-4 py-4 shadow-sm shadow-brand-green/20 sm:px-5 sm:py-5",
    "toolToolbarActions": "grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:gap-3",
    "toolToolbarButton": "inline-flex shrink-0 items-center justify-center rounded-lg border border-slate-700 bg-white px-2.5 py-2 text-center text-xs font-bold leading-snug text-slate-700 shadow-sm transition-colors hover:bg-slate-50 sm:px-4 sm:py-2 sm:text-sm",
    "toolToolbarPinkButton": "inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-brand-pink px-2.5 py-2 text-center text-xs font-bold leading-snug text-white shadow-md shadow-brand-pink/20 transition-colors hover:bg-brand-pink/90 sm:px-4 sm:py-2 sm:text-sm",
    "toolToolbarRow": "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-3",
    "toolToolbarRowSplit": "flex w-full items-center justify-between gap-2",
    "toolWizardChromeMeta": "text-xs font-normal leading-snug text-slate-600 sm:text-sm",
    "toolWizardNavBack": "inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm",
    "toolWizardNavButtonBase": "inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base",
    "toolWizardNavNext": "inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base bg-brand-pink text-white shadow-brand-pink/20 disabled:cursor-not-allowed disabled:opacity-50",
    "toolWizardPanelTitle": "text-xl font-bold text-white sm:text-2xl lg:text-3xl",
    "toolWizardTextLink": "inline-flex shrink-0 items-center justify-center text-xs font-normal leading-snug text-slate-600 transition-colors hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 sm:text-sm",
    "toolWizardTextLinkLabel": "underline underline-offset-2",
    "troubleBulletIcon": "mt-0.5 h-3.5 w-3.5 shrink-0 sm:h-5 sm:w-5",
    "troubleBulletList": "flex flex-col gap-y-2 sm:gap-y-3",
    "troubleBulletText": "text-sm font-normal leading-relaxed sm:text-base",
    "troubleSectionIntro": "text-balance text-sm font-normal leading-relaxed text-slate-900 sm:text-base md:text-lg"
  }
}