RegiCare design system

Build meta

2026-05-28T16:40:15.983Z

/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-2xl font-bold leading-tight sm:text-3xl md:text-4xl lg:text-5xl

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

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

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-base font-bold

text-base font-normal

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

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

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

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-base font-normal leading-relaxed

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 sm:p-2

bg-slate-100 text-slate-700 shadow-sm hover:bg-slate-200 hover:text-slate-900

bg-slate-200 text-slate-800 shadow-sm hover:bg-slate-300 hover:text-slate-900

bg-brand-pink text-white shadow-md shadow-brand-pink/25

bg-brand-green

rounded-2xl bg-slate-50

text-brand-blue

text-slate-700 leading-relaxed

py-16 sm:py-20

pb-24

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-full

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-xl text-base font-bold 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 md:w-auto

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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 md:w-auto

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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-xl text-base font-bold 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

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

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

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

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-32 text-white sm:px-6 lg:px-8

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

text-2xl font-bold leading-tight tracking-tight sm:text-3xl 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-xl font-bold leading-tight sm:text-3xl md: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-base font-bold text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white 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.

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

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

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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

mx-auto flex w-max max-w-full flex-wrap items-center justify-center gap-3 sm:gap-4

inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green px-2 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto 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 py-6 sm:py-8

flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-pink text-base font-bold leading-none text-white shadow-lg shadow-brand-pink/20 sm:h-12 sm:w-12 sm:text-lg

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

m-0 min-w-0 flex-1 text-lg font-bold leading-tight sm:text-xl

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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-xl text-base font-bold 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 h-9

max-md:h-9 max-md:min-h-9 max-md:px-3 max-md:text-xs max-md:leading-none [&_svg]:max-md:h-3.5 [&_svg]:max-md:w-3.5

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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

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

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

w-full md:w-auto

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

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-base font-bold leading-none

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

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

text-base font-normal leading-relaxed

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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-xl text-base font-bold 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 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-xl text-base font-bold 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

mb-10 flex flex-col gap-5 sm:mb-12 sm:gap-4 lg:mb-12

inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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

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-16 sm:py-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-4 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-8 max-md:pb-6 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

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 bg-brand-yellow px-4 py-2.5 text-sm font-bold leading-snug text-black shadow-md shadow-black/25 transition-all hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2 sm:rounded-xl sm:px-6

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

shrink-0 rounded-lg px-2.5 py-2 text-center text-xs font-bold 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-3 max-md:py-2.5 max-md:text-sm sm:rounded-xl sm:px-2 sm:py-2.5 sm:text-sm lg:flex-1 lg:px-3 lg:py-3 lg:text-base

flex gap-1.5 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-2.5 sm:overflow-visible sm:pb-0 lg:flex lg:gap-3

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-3 sm:px-4 sm:pb-3 sm:pt-4

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

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

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

Complete catalog JSON (for copy-paste)

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

{
  "meta": {
    "generatedAt": "2026-05-28T16:40:15.983Z",
    "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-2xl font-bold leading-tight sm:text-3xl md:text-4xl lg:text-5xl",
        "sectionTitle": "text-xl font-bold leading-tight sm:text-3xl md:text-4xl",
        "cardTitle": "text-lg font-bold leading-snug sm:text-xl md:text-2xl",
        "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",
        "labelSmall": "text-base font-bold",
        "helper": "text-base font-normal"
      }
    },
    "typeScale": {
      "heroTitle": "text-2xl font-bold leading-tight sm:text-3xl md:text-4xl lg:text-5xl",
      "sectionTitle": "text-xl font-bold leading-tight sm:text-3xl md:text-4xl",
      "cardTitle": "text-lg font-bold leading-snug sm:text-xl md:text-2xl",
      "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-base font-normal leading-relaxed",
      "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 sm:p-2",
      "idle": "bg-slate-100 text-slate-700 shadow-sm hover:bg-slate-200 hover:text-slate-900",
      "idleEmbedded": "bg-slate-200 text-slate-800 shadow-sm hover:bg-slate-300 hover:text-slate-900",
      "active": "bg-brand-pink text-white shadow-md shadow-brand-pink/25",
      "completeDot": "bg-brand-green",
      "panel": "rounded-2xl bg-slate-50",
      "panelHeading": "text-brand-blue",
      "panelDescText": "text-slate-700 leading-relaxed"
    },
    "spacing": {
      "section": {
        "standard": "py-16 sm:py-20",
        "standardBottom": "pb-24",
        "heroTopOffset": "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-full"
    },
    "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-xl text-base font-bold 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 md:w-auto",
      "secondary": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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 md:w-auto",
      "support": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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-xl text-base font-bold 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",
      "interactiveDirectoryTitle": "text-xl font-bold leading-snug text-brand-blue transition-colors group-hover:text-white sm:text-2xl",
      "interactiveDirectoryBody": "text-base font-normal leading-relaxed text-slate-600 transition-colors group-hover:text-white/90",
      "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"
    },
    "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-32 text-white sm:px-6 lg:px-8",
        "page": "relative overflow-x-clip bg-brand-blue px-4 pb-14 pt-40 text-white sm:px-6 sm:pb-20 sm:pt-36 lg:px-8 lg:pt-40"
      },
      "title": "text-2xl font-bold leading-tight tracking-tight sm:text-3xl 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-xl font-bold leading-tight sm:text-3xl md: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-base font-bold text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white 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": {
    "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",
    "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-xl text-base font-bold 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",
    "heroNavButtonRow": "mx-auto flex w-max max-w-full flex-wrap items-center justify-center gap-3 sm:gap-4",
    "heroNavGreenShell": "inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green px-2 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto 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 py-6 sm:py-8",
    "howItWorksStepBadge": "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-pink text-base font-bold leading-none text-white shadow-lg shadow-brand-pink/20 sm:h-12 sm:w-12 sm:text-lg",
    "howItWorksStepRow": "mb-4 flex items-center gap-3.5 sm:gap-4",
    "howItWorksStepTitle": "m-0 min-w-0 flex-1 text-lg font-bold leading-tight sm:text-xl",
    "inlineNavPinkButton": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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-xl text-base font-bold 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 h-9",
    "inlineNavPinkButtonHeroToolMobile": "max-md:h-9 max-md:min-h-9 max-md:px-3 max-md:text-xs max-md:leading-none [&_svg]:max-md:h-3.5 [&_svg]:max-md:w-3.5",
    "inlineNavPinkButtonMulti": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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",
    "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",
    "marketingHeroLead": "text-base font-medium leading-relaxed text-slate-300 md:text-lg",
    "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",
    "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-base font-bold leading-none",
    "pageHeroContentStack": "flex w-full flex-col items-center gap-7 sm:gap-8",
    "pathwayHelpRecommendation": "text-[15px] font-normal leading-relaxed",
    "pathwaySituationBody": "text-base font-normal leading-relaxed",
    "primaryYellowButton": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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",
    "primaryYellowButtonHeader": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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",
    "primaryYellowButtonOnLight": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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 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-xl text-base font-bold 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",
    "sectionHeadingBlock": "mb-10 flex flex-col gap-5 sm:mb-12 sm:gap-4 lg:mb-12",
    "solidPinkActionButton": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold 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",
    "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-16 sm:py-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-4 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-8 max-md:pb-6 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",
    "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",
    "toolResultYellowCtaButton": "inline-flex shrink-0 items-center justify-center rounded-lg bg-brand-yellow px-4 py-2.5 text-sm font-bold leading-snug text-black shadow-md shadow-black/25 transition-all hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2 sm:rounded-xl sm:px-6",
    "toolSectionCardTitle": "text-xl font-bold text-brand-blue sm:text-2xl lg:text-3xl",
    "toolStepTabButton": "shrink-0 rounded-lg px-2.5 py-2 text-center text-xs font-bold 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-3 max-md:py-2.5 max-md:text-sm sm:rounded-xl sm:px-2 sm:py-2.5 sm:text-sm lg:flex-1 lg:px-3 lg:py-3 lg:text-base",
    "toolStepTabList": "flex gap-1.5 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-2.5 sm:overflow-visible sm:pb-0 lg:flex lg:gap-3",
    "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-3 sm:px-4 sm:pb-3 sm:pt-4",
    "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",
    "toolWizardNavBack": "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",
    "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"
  }
}