Parsons/src/theme/generated/tokens.css

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --fa-button-height-xs: 28px; /** Extra-small — compact text buttons, inline actions */
  --fa-button-height-sm: 32px; /** Small — secondary actions, toolbar buttons */
  --fa-button-height-md: 40px; /** Medium — default size, form submissions */
  --fa-button-height-lg: 48px; /** Large — primary CTAs, mobile touch targets (meets 44px minimum) */
  --fa-button-icon-size-xs: 14px; /** 14px icons in extra-small buttons */
  --fa-button-icon-size-sm: 16px; /** 16px icons in small buttons */
  --fa-button-icon-size-md: 18px; /** 18px icons in medium buttons */
  --fa-button-icon-size-lg: 20px; /** 20px icons in large buttons */
  --fa-input-height-sm: 40px; /** Small — compact forms, admin layouts, matches Button medium height */
  --fa-input-height-md: 48px; /** Medium (default) — standard forms, matches Button large for alignment */
  --fa-input-icon-size-default: 20px; /** 20px — icon size inside input field, matches Figma trailing icon */
  --fa-color-brand-50: #fef9f5; /** Lightest warm tint — warm section backgrounds */
  --fa-color-brand-100: #f7ecdf; /** Light warm — hover backgrounds, subtle fills */
  --fa-color-brand-200: #ebdac8; /** Warm light — secondary backgrounds, divider tones */
  --fa-color-brand-300: #d8c3b5; /** Warm beige — from brand swatch. Surface warmth, card tints */
  --fa-color-brand-400: #d0a070; /** Mid gold — from brand swatch. Secondary interactive, step indicators */
  --fa-color-brand-500: #ba834e; /** Base brand gold — from brand swatch. Primary CTA colour, main interactive. 3.7:1 contrast on white */
  --fa-color-brand-600: #b0610f; /** Rich copper — from brand swatch. Hover/emphasis on brand elements. 4.8:1 contrast on white */
  --fa-color-brand-700: #8b4e0d; /** Deep copper — active states, strong brand text on light backgrounds. 6.7:1 contrast on white */
  --fa-color-brand-800: #6b3c13; /** Dark brown — bold brand accents, high-contrast brand text */
  --fa-color-brand-900: #51301b; /** Chocolate — from brand swatch. Deep emphasis, dark brand surfaces */
  --fa-color-brand-950: #251913; /** Espresso — from brand swatch. Darkest brand tone, near-black warm */
  --fa-color-sage-50: #f2f5f6; /** Lightest sage — subtle cool backgrounds */
  --fa-color-sage-100: #e3eaeb; /** Light sage — hover states on cool surfaces */
  --fa-color-sage-200: #d7e1e2; /** From brand swatch — light cool surface, soft borders */
  --fa-color-sage-300: #c8d4d6; /** Mid-light sage — dividers, secondary borders */
  --fa-color-sage-400: #b9c7c9; /** From brand swatch — mid sage, secondary text on dark backgrounds */
  --fa-color-sage-500: #8ea2a7; /** Base sage — secondary content, muted icons */
  --fa-color-sage-600: #687d84; /** Dark sage — secondary text, subtle icons */
  --fa-color-sage-700: #4c5b6b; /** From brand swatch — strong secondary, dark accents. 6.1:1 contrast on white */
  --fa-color-sage-800: #4c5459; /** From brand swatch — near-dark grey, supplementary text. 6.7:1 contrast on white */
  --fa-color-sage-900: #343c40; /** Very dark sage — high-contrast secondary elements */
  --fa-color-sage-950: #1e2528; /** Near-black cool — darkest secondary tone */
  --fa-color-neutral-50: #fafafa; /** Lightest neutral — default page background alternative */
  --fa-color-neutral-100: #f5f5f5; /** Light neutral — subtle background differentiation */
  --fa-color-neutral-200: #e8e8e8; /** Light grey — standard borders, dividers */
  --fa-color-neutral-300: #d4d4d4; /** Mid-light grey — disabled borders, subtle separators */
  --fa-color-neutral-400: #a3a3a3; /** Mid grey — placeholder text, disabled content */
  --fa-color-neutral-500: #737373; /** Base grey — secondary body text, icons */
  --fa-color-neutral-600: #525252; /** Dark grey — body text, labels. 7.1:1 contrast on white */
  --fa-color-neutral-700: #404040; /** Strong grey — headings, emphasis text. 9.7:1 contrast on white */
  --fa-color-neutral-800: #2c2e35; /** From brand swatch — charcoal with cool tint. Primary text colour. 13.2:1 contrast on white */
  --fa-color-neutral-900: #1a1a1c; /** Near-black — maximum contrast text */
  --fa-color-neutral-950: #0a0a0b; /** Deepest neutral — use sparingly */
  --fa-color-red-50: #fef2f2; /** Error tint — error message backgrounds */
  --fa-color-red-100: #fde8e8; /** Light error — hover on error surfaces */
  --fa-color-red-200: #f9bfbf; /** Light red — error borders, subtle indicators */
  --fa-color-red-300: #f09898; /** Mid-light red — error icon backgrounds */
  --fa-color-red-400: #e56b6b; /** Mid red — error indicators, badges */
  --fa-color-red-500: #d64545; /** Base red — form validation errors, alert accents */
  --fa-color-red-600: #bc2f2f; /** Strong red — error text on light backgrounds. 5.7:1 contrast on white */
  --fa-color-red-700: #9b2424; /** Dark red — error headings, strong alerts */
  --fa-color-red-800: #7a1d1d; /** Deep red — high-contrast error emphasis */
  --fa-color-red-900: #5c1616; /** Very dark red — use sparingly */
  --fa-color-red-950: #3d0e0e; /** Darkest red */
  --fa-color-amber-50: #fff9eb; /** Warning tint — warning message backgrounds */
  --fa-color-amber-100: #fff0cc; /** Light amber — hover on warning surfaces */
  --fa-color-amber-200: #ffe099; /** Light amber — warning borders */
  --fa-color-amber-300: #ffcc66; /** Mid-light amber — warning icon backgrounds */
  --fa-color-amber-400: #ffb833; /** Mid amber — warning badges, price alerts */
  --fa-color-amber-500: #f5a000; /** Base amber — warning accents */
  --fa-color-amber-600: #cc8500; /** Strong amber — warning text. 3.6:1 contrast on white (large text AA) */
  --fa-color-amber-700: #a36b00; /** Dark amber — warning headings. 5.1:1 contrast on white */
  --fa-color-amber-800: #7a5000; /** Deep amber — high-contrast warning emphasis */
  --fa-color-amber-900: #523600; /** Very dark amber — use sparingly */
  --fa-color-amber-950: #331f00; /** Darkest amber */
  --fa-color-green-50: #f0f7f0; /** Success tint — success message backgrounds */
  --fa-color-green-100: #d8ecd8; /** Light green — hover on success surfaces */
  --fa-color-green-200: #b8d8b8; /** Light green — success borders */
  --fa-color-green-300: #8dc08d; /** Mid-light green — success icon backgrounds */
  --fa-color-green-400: #66a866; /** Mid green — success badges, completion indicators */
  --fa-color-green-500: #4a8f4a; /** Base green — success accents, completed steps */
  --fa-color-green-600: #3b7a3b; /** Strong green — success text on light backgrounds. 4.8:1 contrast on white */
  --fa-color-green-700: #2e6b2e; /** Dark green — success headings */
  --fa-color-green-800: #235523; /** Deep green — high-contrast success emphasis */
  --fa-color-green-900: #1a3f1a; /** Very dark green — use sparingly */
  --fa-color-green-950: #0f2a0f; /** Darkest green */
  --fa-color-blue-50: #eff6ff; /** Info tint — info message backgrounds */
  --fa-color-blue-100: #dbeafe; /** Light blue — hover on info surfaces */
  --fa-color-blue-200: #bfdbfe; /** Light blue — info borders */
  --fa-color-blue-300: #93c5fd; /** Mid-light blue — info icon backgrounds */
  --fa-color-blue-400: #60a5fa; /** Mid blue — info badges */
  --fa-color-blue-500: #3b82f6; /** Base blue — info accents, supplementary links */
  --fa-color-blue-600: #2563eb; /** Strong blue — info text on light backgrounds. 4.6:1 contrast on white */
  --fa-color-blue-700: #1d4ed8; /** Dark blue — info headings */
  --fa-color-blue-800: #1e40af; /** Deep blue — high-contrast info emphasis */
  --fa-color-blue-900: #1e3a8a; /** Very dark blue — use sparingly */
  --fa-color-blue-950: #172554; /** Darkest blue */
  --fa-color-white: #ffffff; /** Pure white — card backgrounds, inverse text, primary surface */
  --fa-color-black: #000000; /** Pure black — from brand swatch. Use sparingly; prefer neutral.800-900 for text */
  --fa-color-surface-overlay: rgba(0, 0, 0, 0.5); /** Overlay surface — modal/dialog backdrop at 50% black */
  --fa-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /** Subtle lift — resting buttons, input focus subtle elevation */
  --fa-shadow-md: 0 4px 6px rgba(0,0,0,0.07); /** Medium elevation — cards at rest, dropdowns, popovers */
  --fa-shadow-lg: 0 10px 15px rgba(0,0,0,0.1); /** High elevation — modals, popovers, card hover states */
  --fa-shadow-xl: 0 20px 25px rgba(0,0,0,0.1); /** Maximum elevation — elevated panels, dialog boxes */
  --fa-opacity-disabled: 0.4; /** Disabled state — 40% opacity. Clearly diminished but still distinguishable */
  --fa-opacity-hover: 0.08; /** Hover overlay — subtle 8% tint applied over backgrounds on hover */
  --fa-opacity-overlay: 0.5; /** Modal/dialog backdrop — 50% black overlay behind modals */
  --fa-spacing-1: 4px; /** Tight — inline spacing, minimal gaps between related elements */
  --fa-spacing-2: 8px; /** Small — related element gaps, compact padding, icon margins */
  --fa-spacing-3: 12px; /** Component internal padding (small), chip padding */
  --fa-spacing-4: 16px; /** Default component padding, form field gap, card grid gutter (mobile) */
  --fa-spacing-5: 20px; /** Medium component spacing */
  --fa-spacing-6: 24px; /** Card padding, section gap (small), card grid gutter (desktop) */
  --fa-spacing-8: 32px; /** Section gap (medium), form section separation */
  --fa-spacing-10: 40px; /** Section gap (large) */
  --fa-spacing-12: 48px; /** Page section separation, vertical rhythm break */
  --fa-spacing-16: 64px; /** Hero/banner vertical spacing */
  --fa-spacing-20: 80px; /** Major page sections, large vertical spacing */
  --fa-spacing-0-5: 2px; /** Hairline — icon-to-text tight spacing, fine adjustments */
  --fa-border-radius-none: 0px; /** Square corners — tables, dividers, sharp elements */
  --fa-border-radius-sm: 4px; /** Small radius — inputs, small interactive elements, chips */
  --fa-border-radius-md: 8px; /** Medium radius — cards, buttons, dropdowns (default) */
  --fa-border-radius-lg: 12px; /** Large radius — modals, large cards */
  --fa-border-radius-xl: 16px; /** Extra large — feature cards, hero elements */
  --fa-border-radius-full: 9999px; /** Full/pill — avatars, pill buttons, circular elements */
  --fa-font-family-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /** Primary font — Montserrat. Used for headings (h1-h6), body text, labels, and all UI elements */
  --fa-font-family-display: 'Noto Serif SC', Georgia, 'Times New Roman', serif; /** Display font — Noto Serif SC. Elegant serif for hero/display text only. Adds warmth and gravitas at large sizes */
  --fa-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; /** Monospace font — for reference numbers (FA-2026-00847), tabular pricing data, and code */
  --fa-font-size-2xs: 0.6875rem; /** 11px — smallest UI text: compact captions, compact overlines */
  --fa-font-size-xs: 0.75rem; /** 12px — small text: captions, labels, overlines, body/xs */
  --fa-font-size-sm: 0.875rem; /** 14px — body small, labels, helper text */
  --fa-font-size-base: 1rem; /** 16px — default body text, heading/6, label/lg */
  --fa-font-size-md: 1.125rem; /** 18px — body large, heading/5 */
  --fa-font-size-lg: 1.25rem; /** 20px — heading/4 */
  --fa-font-size-xl: 1.5rem; /** 24px — heading/3 */
  --fa-font-size-2xl: 1.875rem; /** 30px — heading/2 */
  --fa-font-size-3xl: 2.25rem; /** 36px — heading/1 */
  --fa-font-size-4xl: 3rem; /** 48px — reserved (legacy) */
  --fa-font-size-display-1: 4rem; /** 64px — display/1 */
  --fa-font-size-display-2: 3.25rem; /** 52px — display/2 */
  --fa-font-size-display-3: 2.5rem; /** 40px — display/3 */
  --fa-font-size-display-sm: 2rem; /** 32px — display/sm, smallest display text */
  --fa-font-size-display-hero: 5rem; /** 80px — display/hero, largest display text */
  --fa-font-size-mobile-display-hero: 2rem; /** 32px — mobile display/hero (from 80px desktop) */
  --fa-font-size-mobile-display1: 1.75rem; /** 28px — mobile display/1 (from 64px desktop) */
  --fa-font-size-mobile-display2: 1.5rem; /** 24px — mobile display/2 (from 52px desktop) */
  --fa-font-size-mobile-display3: 1.375rem; /** 22px — mobile display/3 (from 40px desktop) */
  --fa-font-size-mobile-display-sm: 1.25rem; /** 20px — mobile display/sm (from 32px desktop) */
  --fa-font-size-mobile-h1: 1.625rem; /** 26px — mobile heading/1 (from 36px desktop) */
  --fa-font-size-mobile-h2: 1.375rem; /** 22px — mobile heading/2 (from 30px desktop) */
  --fa-font-size-mobile-h3: 1.25rem; /** 20px — mobile heading/3 (from 24px desktop) */
  --fa-font-size-mobile-h4: 1.125rem; /** 18px — mobile heading/4 (from 20px desktop) */
  --fa-font-size-mobile-h5: 1rem; /** 16px — mobile heading/5 (from 18px desktop) */
  --fa-font-size-mobile-h6: 0.875rem; /** 14px — mobile heading/6 (from 16px desktop) */
  --fa-font-weight-regular: 400; /** Regular weight — captions, display text (serif carries inherent weight) */
  --fa-font-weight-medium: 500; /** Medium weight — body text, labels. Slightly bolder than regular for improved readability */
  --fa-font-weight-semibold: 600; /** Semibold — overlines, button text, navigation */
  --fa-font-weight-bold: 700; /** Bold — all headings (h1-h6) */
  --fa-line-height-tight: 1.25; /** Tight leading — large headings, display text */
  --fa-line-height-snug: 1.375; /** Snug leading — sub-headings, labels, small text */
  --fa-line-height-normal: 1.5; /** Normal leading — default body text, optimal readability */
  --fa-line-height-relaxed: 1.75; /** Relaxed leading — large body text, long-form content */
  --fa-letter-spacing-tighter: -0.02em; /** Tighter tracking — large display text */
  --fa-letter-spacing-tight: -0.01em; /** Tight tracking — headings */
  --fa-letter-spacing-normal: 0em; /** Normal tracking — body text, most content */
  --fa-letter-spacing-wide: 0.02em; /** Wide tracking — captions, small text */
  --fa-letter-spacing-wider: 0.05em; /** Wider tracking — labels, UI text */
  --fa-letter-spacing-widest: 0.08em; /** Widest tracking — overlines, uppercase text */
  --fa-typography-display-hero-line-height: 1.05;
  --fa-typography-display-hero-letter-spacing: -1.5px;
  --fa-typography-display1-line-height: 1.078;
  --fa-typography-display1-letter-spacing: -1px;
  --fa-typography-display2-line-height: 1.096;
  --fa-typography-display2-letter-spacing: -0.5px;
  --fa-typography-display3-line-height: 1.15;
  --fa-typography-display3-letter-spacing: -0.25px;
  --fa-typography-display-sm-line-height: 1.1875;
  --fa-typography-display-sm-letter-spacing: 0px;
  --fa-typography-h1-line-height: 1.194;
  --fa-typography-h1-letter-spacing: -0.5px;
  --fa-typography-h2-line-height: 1.267;
  --fa-typography-h2-letter-spacing: -0.25px;
  --fa-typography-h3-line-height: 1.292;
  --fa-typography-h3-letter-spacing: 0px;
  --fa-typography-h4-line-height: 1.35;
  --fa-typography-h4-letter-spacing: 0px;
  --fa-typography-h5-line-height: 1.389;
  --fa-typography-h5-letter-spacing: 0px;
  --fa-typography-h6-line-height: 1.375;
  --fa-typography-h6-letter-spacing: 0px;
  --fa-typography-body-lg-line-height: 1.611;
  --fa-typography-body-lg-letter-spacing: 0px;
  --fa-typography-body-line-height: 1.625;
  --fa-typography-body-letter-spacing: 0px;
  --fa-typography-body-sm-line-height: 1.571;
  --fa-typography-body-sm-letter-spacing: 0px;
  --fa-typography-body-xs-line-height: 1.5;
  --fa-typography-body-xs-letter-spacing: 0.1px;
  --fa-typography-label-lg-line-height: 1.3125;
  --fa-typography-label-lg-letter-spacing: 0.1px;
  --fa-typography-label-line-height: 1.286;
  --fa-typography-label-letter-spacing: 0.15px;
  --fa-typography-label-sm-line-height: 1.333;
  --fa-typography-label-sm-letter-spacing: 0.2px;
  --fa-typography-caption-line-height: 1.417;
  --fa-typography-caption-letter-spacing: 0.2px;
  --fa-typography-caption-sm-line-height: 1.364;
  --fa-typography-caption-sm-letter-spacing: 0.2px;
  --fa-typography-overline-line-height: 1.333;
  --fa-typography-overline-letter-spacing: 1.5px;
  --fa-typography-overline-sm-line-height: 1.273;
  --fa-typography-overline-sm-letter-spacing: 1.5px;
  --fa-button-padding-x-xs: var(--fa-spacing-2); /** 8px — compact horizontal padding */
  --fa-button-padding-x-sm: var(--fa-spacing-3); /** 12px — small horizontal padding */
  --fa-button-padding-x-md: var(--fa-spacing-4); /** 16px — default horizontal padding */
  --fa-button-padding-x-lg: var(--fa-spacing-6); /** 24px — generous CTA horizontal padding */
  --fa-button-padding-y-xs: var(--fa-spacing-1); /** 4px — compact vertical padding */
  --fa-button-padding-y-sm: var(--fa-spacing-1); /** 4px — small vertical padding */
  --fa-button-padding-y-md: var(--fa-spacing-2); /** 8px — default vertical padding */
  --fa-button-padding-y-lg: var(--fa-spacing-3); /** 12px — generous CTA vertical padding */
  --fa-button-font-size-xs: var(--fa-font-size-xs); /** 12px — extra-small button text */
  --fa-button-font-size-sm: var(--fa-font-size-sm); /** 14px — small button text */
  --fa-button-font-size-md: var(--fa-font-size-sm); /** 14px — default button text */
  --fa-button-font-size-lg: var(--fa-font-size-base); /** 16px — large button text */
  --fa-button-icon-gap-xs: var(--fa-spacing-1); /** 4px icon-text gap */
  --fa-button-icon-gap-sm: var(--fa-spacing-1); /** 4px icon-text gap */
  --fa-button-icon-gap-md: var(--fa-spacing-2); /** 8px icon-text gap */
  --fa-button-icon-gap-lg: var(--fa-spacing-2); /** 8px icon-text gap */
  --fa-button-border-radius-default: var(--fa-border-radius-md); /** 8px — standard button rounding */
  --fa-card-border-radius-default: var(--fa-border-radius-md); /** 8px — standard card rounding */
  --fa-card-padding-default: var(--fa-spacing-6); /** 24px — standard card padding (desktop) */
  --fa-card-padding-compact: var(--fa-spacing-4); /** 16px — compact card padding (mobile, tight layouts) */
  --fa-card-shadow-default: var(--fa-shadow-md); /** Medium shadow — resting elevated card */
  --fa-card-shadow-hover: var(--fa-shadow-lg); /** High shadow — interactive card on hover */
  --fa-input-padding-x-default: var(--fa-spacing-3); /** 12px — inner horizontal padding matching Figma design */
  --fa-input-padding-y-sm: var(--fa-spacing-2); /** 8px — compact vertical padding for small size */
  --fa-input-padding-y-md: var(--fa-spacing-3); /** 12px — standard vertical padding for medium size */
  --fa-input-font-size-default: var(--fa-font-size-base); /** 16px — prevents iOS auto-zoom on focus, matches Figma */
  --fa-input-border-radius-default: var(--fa-border-radius-sm); /** 4px — subtle rounding, consistent with Figma design */
  --fa-input-gap-default: var(--fa-spacing-2); /** 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability */
  --fa-color-text-primary: var(--fa-color-neutral-800); /** Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading */
  --fa-color-text-secondary: var(--fa-color-neutral-600); /** Secondary text — helper text, descriptions, metadata, less prominent content */
  --fa-color-text-tertiary: var(--fa-color-neutral-500); /** Tertiary text — placeholders, timestamps, attribution, meta information */
  --fa-color-text-disabled: var(--fa-color-neutral-400); /** Disabled text — clearly diminished but still readable for accessibility */
  --fa-color-text-inverse: var(--fa-color-white); /** Inverse text — white text on dark or coloured backgrounds (buttons, banners) */
  --fa-color-text-brand: var(--fa-color-brand-600); /** Brand-coloured text — links, inline brand emphasis. Copper tone meets AA on white (4.8:1) */
  --fa-color-text-error: var(--fa-color-red-600); /** Error text — form validation messages, error descriptions */
  --fa-color-text-success: var(--fa-color-green-600); /** Success text — confirmation messages, positive feedback */
  --fa-color-text-warning: var(--fa-color-amber-700); /** Warning text — cautionary messages. Uses amber.700 for WCAG AA compliance on white (5.1:1) */
  --fa-color-surface-default: var(--fa-color-white); /** Default surface — main page background, card faces */
  --fa-color-surface-subtle: var(--fa-color-neutral-50); /** Subtle surface — slight differentiation from default, alternate row backgrounds */
  --fa-color-surface-raised: var(--fa-color-white); /** Raised surface — cards, elevated containers (distinguished by shadow rather than colour) */
  --fa-color-surface-warm: var(--fa-color-brand-50); /** Warm surface — brand-tinted sections, promotional areas, upsell cards like 'Protect your plan' */
  --fa-color-surface-cool: var(--fa-color-sage-50); /** Cool surface — calming sections, information panels, FAQ backgrounds */
  --fa-color-border-default: var(--fa-color-neutral-200); /** Default border — cards, containers, resting input borders */
  --fa-color-border-strong: var(--fa-color-neutral-400); /** Strong border — emphasis borders, active input borders */
  --fa-color-border-subtle: var(--fa-color-neutral-100); /** Subtle border — section dividers, soft separators */
  --fa-color-border-brand: var(--fa-color-brand-500); /** Brand border — focused inputs, selected cards, brand-accented containers */
  --fa-color-border-error: var(--fa-color-red-500); /** Error border — form fields with validation errors */
  --fa-color-border-success: var(--fa-color-green-500); /** Success border — validated fields, confirmed selections */
  --fa-color-interactive-default: var(--fa-color-brand-600); /** Default interactive — primary button fill, link colour, checkbox accent. Uses brand.600 (copper) for WCAG AA compliance (4.6:1 on white) */
  --fa-color-interactive-hover: var(--fa-color-brand-700); /** Hover state — deepened copper on hover for clear visual feedback */
  --fa-color-interactive-active: var(--fa-color-brand-800); /** Active/pressed state — dark brown during click/tap */
  --fa-color-interactive-disabled: var(--fa-color-neutral-300); /** Disabled interactive — muted grey, no pointer events */
  --fa-color-interactive-focus: var(--fa-color-brand-600); /** Focus ring colour — keyboard navigation indicator, 2px outline with 2px offset */
  --fa-color-interactive-secondary: var(--fa-color-sage-700); /** Secondary interactive — grey/sage buttons, less prominent actions */
  --fa-color-interactive-secondary-hover: var(--fa-color-sage-800); /** Secondary interactive hover — darkened sage on hover */
  --fa-color-feedback-success: var(--fa-color-green-600); /** Success — confirmations, completed arrangement steps, booking confirmed */
  --fa-color-feedback-success-subtle: var(--fa-color-green-50); /** Success background — success message container fill, completion banners */
  --fa-color-feedback-warning: var(--fa-color-amber-600); /** Warning — price change alerts, important notices, bond/insurance prompts */
  --fa-color-feedback-warning-subtle: var(--fa-color-amber-50); /** Warning background — warning message container fill, notice banners */
  --fa-color-feedback-error: var(--fa-color-red-600); /** Error — form validation failures, system errors, payment issues */
  --fa-color-feedback-error-subtle: var(--fa-color-red-50); /** Error background — error message container fill, alert banners */
  --fa-color-feedback-info: var(--fa-color-blue-600); /** Info — helpful tips, supplementary information, guidance callouts */
  --fa-color-feedback-info-subtle: var(--fa-color-blue-50); /** Info background — info message container fill, tip banners */
  --fa-spacing-component-xs: var(--fa-spacing-1); /** 4px — tight gaps: icon margins, chip internal padding */
  --fa-spacing-component-sm: var(--fa-spacing-2); /** 8px — small padding: badge padding, inline element gaps */
  --fa-spacing-component-md: var(--fa-spacing-4); /** 16px — default padding: button padding, input padding, form field gap */
  --fa-spacing-component-lg: var(--fa-spacing-6); /** 24px — large padding: card padding (desktop), modal padding */
  --fa-spacing-layout-gutter: var(--fa-spacing-4); /** 16px — grid gutter on mobile, card grid gap */
  --fa-spacing-layout-gutter-desktop: var(--fa-spacing-6); /** 24px — grid gutter on desktop */
  --fa-spacing-layout-section: var(--fa-spacing-12); /** 48px — vertical gap between page sections */
  --fa-spacing-layout-page: var(--fa-spacing-16); /** 64px — major page section separation, hero spacing */
  --fa-spacing-layout-page-padding: var(--fa-spacing-4); /** 16px — horizontal page padding on mobile */
  --fa-spacing-layout-page-padding-desktop: var(--fa-spacing-8); /** 32px — horizontal page padding on desktop */
  --fa-typography-display-hero-font-family: var(--fa-font-family-display);
  --fa-typography-display-hero-font-size: var(--fa-font-size-display-hero); /** 80px desktop */
  --fa-typography-display-hero-font-size-mobile: var(--fa-font-size-mobile-display-hero); /** 32px mobile */
  --fa-typography-display-hero-font-weight: var(--fa-font-weight-regular); /** 400 — serif carries inherent weight at large sizes */
  --fa-typography-display1-font-family: var(--fa-font-family-display);
  --fa-typography-display1-font-size: var(--fa-font-size-display-1); /** 64px desktop */
  --fa-typography-display1-font-size-mobile: var(--fa-font-size-mobile-display1); /** 28px mobile */
  --fa-typography-display1-font-weight: var(--fa-font-weight-regular);
  --fa-typography-display2-font-family: var(--fa-font-family-display);
  --fa-typography-display2-font-size: var(--fa-font-size-display-2); /** 52px desktop */
  --fa-typography-display2-font-size-mobile: var(--fa-font-size-mobile-display2); /** 24px mobile */
  --fa-typography-display2-font-weight: var(--fa-font-weight-regular);
  --fa-typography-display3-font-family: var(--fa-font-family-display);
  --fa-typography-display3-font-size: var(--fa-font-size-display-3); /** 40px desktop */
  --fa-typography-display3-font-size-mobile: var(--fa-font-size-mobile-display3); /** 22px mobile */
  --fa-typography-display3-font-weight: var(--fa-font-weight-regular);
  --fa-typography-display-sm-font-family: var(--fa-font-family-display);
  --fa-typography-display-sm-font-size: var(--fa-font-size-display-sm); /** 32px desktop */
  --fa-typography-display-sm-font-size-mobile: var(--fa-font-size-mobile-display-sm); /** 20px mobile */
  --fa-typography-display-sm-font-weight: var(--fa-font-weight-regular);
  --fa-typography-h1-font-family: var(--fa-font-family-body);
  --fa-typography-h1-font-size: var(--fa-font-size-3xl); /** 36px desktop */
  --fa-typography-h1-font-size-mobile: var(--fa-font-size-mobile-h1); /** 26px mobile */
  --fa-typography-h1-font-weight: var(--fa-font-weight-bold);
  --fa-typography-h2-font-family: var(--fa-font-family-body);
  --fa-typography-h2-font-size: var(--fa-font-size-2xl); /** 30px desktop */
  --fa-typography-h2-font-size-mobile: var(--fa-font-size-mobile-h2); /** 22px mobile */
  --fa-typography-h2-font-weight: var(--fa-font-weight-bold);
  --fa-typography-h3-font-family: var(--fa-font-family-body);
  --fa-typography-h3-font-size: var(--fa-font-size-xl); /** 24px desktop */
  --fa-typography-h3-font-size-mobile: var(--fa-font-size-mobile-h3); /** 20px mobile */
  --fa-typography-h3-font-weight: var(--fa-font-weight-bold);
  --fa-typography-h4-font-family: var(--fa-font-family-body);
  --fa-typography-h4-font-size: var(--fa-font-size-lg); /** 20px desktop */
  --fa-typography-h4-font-size-mobile: var(--fa-font-size-mobile-h4); /** 18px mobile */
  --fa-typography-h4-font-weight: var(--fa-font-weight-bold);
  --fa-typography-h5-font-family: var(--fa-font-family-body);
  --fa-typography-h5-font-size: var(--fa-font-size-md); /** 18px desktop */
  --fa-typography-h5-font-size-mobile: var(--fa-font-size-mobile-h5); /** 16px mobile */
  --fa-typography-h5-font-weight: var(--fa-font-weight-bold);
  --fa-typography-h6-font-family: var(--fa-font-family-body);
  --fa-typography-h6-font-size: var(--fa-font-size-base); /** 16px desktop */
  --fa-typography-h6-font-size-mobile: var(--fa-font-size-mobile-h6); /** 14px mobile */
  --fa-typography-h6-font-weight: var(--fa-font-weight-bold);
  --fa-typography-body-lg-font-family: var(--fa-font-family-body);
  --fa-typography-body-lg-font-size: var(--fa-font-size-md); /** 18px */
  --fa-typography-body-lg-font-weight: var(--fa-font-weight-medium);
  --fa-typography-body-font-family: var(--fa-font-family-body);
  --fa-typography-body-font-size: var(--fa-font-size-base); /** 16px */
  --fa-typography-body-font-weight: var(--fa-font-weight-medium);
  --fa-typography-body-sm-font-family: var(--fa-font-family-body);
  --fa-typography-body-sm-font-size: var(--fa-font-size-sm); /** 14px */
  --fa-typography-body-sm-font-weight: var(--fa-font-weight-medium);
  --fa-typography-body-xs-font-family: var(--fa-font-family-body);
  --fa-typography-body-xs-font-size: var(--fa-font-size-xs); /** 12px */
  --fa-typography-body-xs-font-weight: var(--fa-font-weight-medium);
  --fa-typography-label-lg-font-family: var(--fa-font-family-body);
  --fa-typography-label-lg-font-size: var(--fa-font-size-base); /** 16px */
  --fa-typography-label-lg-font-weight: var(--fa-font-weight-medium);
  --fa-typography-label-font-family: var(--fa-font-family-body);
  --fa-typography-label-font-size: var(--fa-font-size-sm); /** 14px */
  --fa-typography-label-font-weight: var(--fa-font-weight-medium);
  --fa-typography-label-sm-font-family: var(--fa-font-family-body);
  --fa-typography-label-sm-font-size: var(--fa-font-size-xs); /** 12px */
  --fa-typography-label-sm-font-weight: var(--fa-font-weight-medium);
  --fa-typography-caption-font-family: var(--fa-font-family-body);
  --fa-typography-caption-font-size: var(--fa-font-size-xs); /** 12px */
  --fa-typography-caption-font-weight: var(--fa-font-weight-regular);
  --fa-typography-caption-sm-font-family: var(--fa-font-family-body);
  --fa-typography-caption-sm-font-size: var(--fa-font-size-2xs); /** 11px — accessibility floor */
  --fa-typography-caption-sm-font-weight: var(--fa-font-weight-regular);
  --fa-typography-overline-font-family: var(--fa-font-family-body);
  --fa-typography-overline-font-size: var(--fa-font-size-xs); /** 12px */
  --fa-typography-overline-font-weight: var(--fa-font-weight-semibold);
  --fa-typography-overline-sm-font-family: var(--fa-font-family-body);
  --fa-typography-overline-sm-font-size: var(--fa-font-size-2xs); /** 11px — accessibility floor */
  --fa-typography-overline-sm-font-weight: var(--fa-font-weight-semibold);
  --fa-card-border-default: var(--fa-color-border-default); /** Neutral border for outlined cards */
  --fa-card-background-default: var(--fa-color-surface-raised); /** White — standard card background (raised surface) */
}