Parsons/src/theme/generated/tokens.js

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

export const BadgeHeightSm = "22px"; // Small — compact inline status indicators
export const BadgeHeightMd = "26px"; // Medium — default status badges, card labels
export const BadgeHeightLg = "32px"; // Large — prominent labels, hero badges, marketing callouts
export const BadgePaddingXSm = "8px"; // 8px — compact horizontal padding
export const BadgePaddingXMd = "12px"; // 12px — default horizontal padding
export const BadgePaddingXLg = "16px"; // 16px — generous horizontal padding
export const BadgeFontSizeSm = "0.6875rem"; // 11px — small badge text
export const BadgeFontSizeMd = "0.75rem"; // 12px — default badge text
export const BadgeFontSizeLg = "0.875rem"; // 14px — large badge text
export const BadgeIconSizeSm = "12px"; // 12px icons in small badges
export const BadgeIconSizeMd = "14px"; // 14px icons in medium badges
export const BadgeIconSizeLg = "16px"; // 16px icons in large badges
export const BadgeIconGapDefault = "4px"; // 4px icon-text gap
export const BadgeBorderRadiusDefault = "9999px"; // Pill shape — fully rounded
export const ButtonHeightXs = "28px"; // Extra-small — compact text buttons, inline actions
export const ButtonHeightSm = "32px"; // Small — secondary actions, toolbar buttons
export const ButtonHeightMd = "40px"; // Medium — default size, form submissions
export const ButtonHeightLg = "48px"; // Large — primary CTAs, mobile touch targets (meets 44px minimum)
export const ButtonPaddingXXs = "8px"; // 8px — compact horizontal padding
export const ButtonPaddingXSm = "12px"; // 12px — small horizontal padding
export const ButtonPaddingXMd = "16px"; // 16px — default horizontal padding
export const ButtonPaddingXLg = "24px"; // 24px — generous CTA horizontal padding
export const ButtonPaddingYXs = "4px"; // 4px — compact vertical padding
export const ButtonPaddingYSm = "4px"; // 4px — small vertical padding
export const ButtonPaddingYMd = "8px"; // 8px — default vertical padding
export const ButtonPaddingYLg = "12px"; // 12px — generous CTA vertical padding
export const ButtonFontSizeXs = "0.75rem"; // 12px — extra-small button text
export const ButtonFontSizeSm = "0.875rem"; // 14px — small button text
export const ButtonFontSizeMd = "0.875rem"; // 14px — default button text
export const ButtonFontSizeLg = "1rem"; // 16px — large button text
export const ButtonIconSizeXs = "14px"; // 14px icons in extra-small buttons
export const ButtonIconSizeSm = "16px"; // 16px icons in small buttons
export const ButtonIconSizeMd = "18px"; // 18px icons in medium buttons
export const ButtonIconSizeLg = "20px"; // 20px icons in large buttons
export const ButtonIconGapXs = "4px"; // 4px icon-text gap
export const ButtonIconGapSm = "4px"; // 4px icon-text gap
export const ButtonIconGapMd = "8px"; // 8px icon-text gap
export const ButtonIconGapLg = "8px"; // 8px icon-text gap
export const ButtonBorderRadiusDefault = "8px"; // 8px — standard button rounding
export const CardBorderRadiusDefault = "8px"; // 8px — standard card rounding
export const CardPaddingDefault = "24px"; // 24px — standard card padding (desktop)
export const CardPaddingCompact = "16px"; // 16px — compact card padding (mobile, tight layouts)
export const CardShadowDefault = "0 4px 6px rgba(0,0,0,0.07)"; // Medium shadow — resting elevated card
export const CardShadowHover = "0 10px 15px rgba(0,0,0,0.1)"; // High shadow — interactive card on hover
export const CardBorderDefault = "#e8e8e8"; // Neutral border for outlined cards
export const CardBorderSelected = "#ba834e"; // Brand border for selected/active cards — warm gold accent
export const CardBackgroundDefault = "#ffffff"; // White — standard card background (raised surface)
export const CardBackgroundHover = "#fafafa"; // Subtle grey fill on hover — neutral.50 for soft interactive feedback
export const CardBackgroundSelected = "#fef9f5"; // Warm tint for selected cards — brand.50 reinforces active state
export const ChipHeightSm = "28px"; // Small — compact inline tags, tight layouts
export const ChipHeightMd = "32px"; // Medium — default interactive chips, filter tags
export const ChipPaddingXSm = "8px"; // 8px — compact horizontal padding
export const ChipPaddingXMd = "12px"; // 12px — default horizontal padding
export const ChipFontSizeSm = "0.75rem"; // 12px — small chip text
export const ChipFontSizeMd = "0.875rem"; // 14px — default chip text
export const ChipIconSizeSm = "16px"; // 16px icons in small chips
export const ChipIconSizeMd = "18px"; // 18px icons in medium chips
export const ChipDeleteIconSizeSm = "14px"; // 14px delete icon in small chips
export const ChipDeleteIconSizeMd = "16px"; // 16px delete icon in medium chips
export const ChipIconGapDefault = "4px"; // 4px icon-text gap
export const ChipBorderRadiusDefault = "9999px"; // Pill shape — fully rounded
export const InputHeightSm = "40px"; // Small — compact forms, admin layouts, matches Button medium height
export const InputHeightMd = "48px"; // Medium (default) — standard forms, matches Button large for alignment
export const InputPaddingXDefault = "12px"; // 12px — inner horizontal padding matching Figma design
export const InputPaddingYSm = "8px"; // 8px — compact vertical padding for small size
export const InputPaddingYMd = "12px"; // 12px — standard vertical padding for medium size
export const InputFontSizeDefault = "1rem"; // 16px — prevents iOS auto-zoom on focus, matches Figma
export const InputBorderRadiusDefault = "4px"; // 4px — subtle rounding, consistent with Figma design
export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability
export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon
export const MapPinHeight = "28px"; // Pill height — compact for map density
export const MapPinPaddingX = "12px"; // 12px horizontal padding inside pill
export const MapPinFontSize = "12px"; // Small but legible price text
export const MapPinBorderRadius = "9999px"; // Fully rounded pill shape
export const MapPinDotSize = "12px"; // Small circle marker
export const MapPinNubSize = "6px"; // Nub triangle size
export const MiniCardImageHeight = "120px"; // Shorter image than full listing cards (180px) for compact grids
export const MiniCardContentPadding = "12px"; // 12px — matches ProviderCard/VenueCard content padding
export const MiniCardContentGap = "4px"; // 4px vertical gap between content rows
export const ProviderCardImageHeight = "180px"; // Fixed image height for consistent card sizing in list layouts
export const ProviderCardLogoSize = "64px"; // Logo width/height — rounded rectangle, overlapping image bottom into content row
export const ProviderCardLogoBorderRadius = "8px"; // 8px rounded rectangle — softer than circle, matches card border radius
export const ProviderCardContentPadding = "12px"; // 12px content padding — tight to keep card compact in listing layout
export const ProviderCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
export const RadioSizeDefault = "20px"; // Default radio size — matches Figma 16px + padding for 44px touch target area
export const RadioDotSizeDefault = "10px"; // Selected indicator dot — 50% of outer size
export const SwitchTrackWidth = "44px"; // Track width — slightly narrower than Figma 52px for better proportion with 44px touch target
export const SwitchTrackHeight = "24px"; // Track height
export const SwitchTrackBorderRadius = "9999px"; // Pill shape
export const SwitchThumbSize = "18px"; // Thumb diameter — sits inside the track with 3px inset
export const VenueCardImageHeight = "180px"; // Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results
export const VenueCardContentPadding = "12px"; // 12px content padding — matches ProviderCard for visual consistency
export const VenueCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
export const ColorBrand50 = "#fef9f5"; // Lightest warm tint — warm section backgrounds
export const ColorBrand100 = "#f7ecdf"; // Light warm — hover backgrounds, subtle fills
export const ColorBrand200 = "#ebdac8"; // Warm light — secondary backgrounds, divider tones
export const ColorBrand300 = "#d8c3b5"; // Warm beige — from brand swatch. Surface warmth, card tints
export const ColorBrand400 = "#d0a070"; // Mid gold — from brand swatch. Secondary interactive, step indicators
export const ColorBrand500 = "#ba834e"; // Base brand gold — from brand swatch. Primary CTA colour, main interactive. 3.7:1 contrast on white
export const ColorBrand600 = "#b0610f"; // Rich copper — from brand swatch. Hover/emphasis on brand elements. 4.8:1 contrast on white
export const ColorBrand700 = "#8b4e0d"; // Deep copper — active states, strong brand text on light backgrounds. 6.7:1 contrast on white
export const ColorBrand800 = "#6b3c13"; // Dark brown — bold brand accents, high-contrast brand text
export const ColorBrand900 = "#51301b"; // Chocolate — from brand swatch. Deep emphasis, dark brand surfaces
export const ColorBrand950 = "#251913"; // Espresso — from brand swatch. Darkest brand tone, near-black warm
export const ColorSage50 = "#f2f5f6"; // Lightest sage — subtle cool backgrounds
export const ColorSage100 = "#e3eaeb"; // Light sage — hover states on cool surfaces
export const ColorSage200 = "#d7e1e2"; // From brand swatch — light cool surface, soft borders
export const ColorSage300 = "#c8d4d6"; // Mid-light sage — dividers, secondary borders
export const ColorSage400 = "#b9c7c9"; // From brand swatch — mid sage, secondary text on dark backgrounds
export const ColorSage500 = "#8ea2a7"; // Base sage — secondary content, muted icons
export const ColorSage600 = "#687d84"; // Dark sage — secondary text, subtle icons
export const ColorSage700 = "#4c5b6b"; // From brand swatch — strong secondary, dark accents. 6.1:1 contrast on white
export const ColorSage800 = "#4c5459"; // From brand swatch — near-dark grey, supplementary text. 6.7:1 contrast on white
export const ColorSage900 = "#343c40"; // Very dark sage — high-contrast secondary elements
export const ColorSage950 = "#1e2528"; // Near-black cool — darkest secondary tone
export const ColorNeutral50 = "#fafafa"; // Lightest neutral — default page background alternative
export const ColorNeutral100 = "#f5f5f5"; // Light neutral — subtle background differentiation
export const ColorNeutral200 = "#e8e8e8"; // Light grey — standard borders, dividers
export const ColorNeutral300 = "#d4d4d4"; // Mid-light grey — disabled borders, subtle separators
export const ColorNeutral400 = "#a3a3a3"; // Mid grey — placeholder text, disabled content
export const ColorNeutral500 = "#737373"; // Base grey — secondary body text, icons
export const ColorNeutral600 = "#525252"; // Dark grey — body text, labels. 7.1:1 contrast on white
export const ColorNeutral700 = "#404040"; // Strong grey — headings, emphasis text. 9.7:1 contrast on white
export const ColorNeutral800 = "#2c2e35"; // From brand swatch — charcoal with cool tint. Primary text colour. 13.2:1 contrast on white
export const ColorNeutral900 = "#1a1a1c"; // Near-black — maximum contrast text
export const ColorNeutral950 = "#0a0a0b"; // Deepest neutral — use sparingly
export const ColorRed50 = "#fef2f2"; // Error tint — error message backgrounds
export const ColorRed100 = "#fde8e8"; // Light error — hover on error surfaces
export const ColorRed200 = "#f9bfbf"; // Light red — error borders, subtle indicators
export const ColorRed300 = "#f09898"; // Mid-light red — error icon backgrounds
export const ColorRed400 = "#e56b6b"; // Mid red — error indicators, badges
export const ColorRed500 = "#d64545"; // Base red — form validation errors, alert accents
export const ColorRed600 = "#bc2f2f"; // Strong red — error text on light backgrounds. 5.7:1 contrast on white
export const ColorRed700 = "#9b2424"; // Dark red — error headings, strong alerts
export const ColorRed800 = "#7a1d1d"; // Deep red — high-contrast error emphasis
export const ColorRed900 = "#5c1616"; // Very dark red — use sparingly
export const ColorRed950 = "#3d0e0e"; // Darkest red
export const ColorAmber50 = "#fff9eb"; // Warning tint — warning message backgrounds
export const ColorAmber100 = "#fff0cc"; // Light amber — hover on warning surfaces
export const ColorAmber200 = "#ffe099"; // Light amber — warning borders
export const ColorAmber300 = "#ffcc66"; // Mid-light amber — warning icon backgrounds
export const ColorAmber400 = "#ffb833"; // Mid amber — warning badges, price alerts
export const ColorAmber500 = "#f5a000"; // Base amber — warning accents
export const ColorAmber600 = "#cc8500"; // Strong amber — warning text. 3.6:1 contrast on white (large text AA)
export const ColorAmber700 = "#a36b00"; // Dark amber — warning headings. 5.1:1 contrast on white
export const ColorAmber800 = "#7a5000"; // Deep amber — high-contrast warning emphasis
export const ColorAmber900 = "#523600"; // Very dark amber — use sparingly
export const ColorAmber950 = "#331f00"; // Darkest amber
export const ColorGreen50 = "#f0f7f0"; // Success tint — success message backgrounds
export const ColorGreen100 = "#d8ecd8"; // Light green — hover on success surfaces
export const ColorGreen200 = "#b8d8b8"; // Light green — success borders
export const ColorGreen300 = "#8dc08d"; // Mid-light green — success icon backgrounds
export const ColorGreen400 = "#66a866"; // Mid green — success badges, completion indicators
export const ColorGreen500 = "#4a8f4a"; // Base green — success accents, completed steps
export const ColorGreen600 = "#3b7a3b"; // Strong green — success text on light backgrounds. 4.8:1 contrast on white
export const ColorGreen700 = "#2e6b2e"; // Dark green — success headings
export const ColorGreen800 = "#235523"; // Deep green — high-contrast success emphasis
export const ColorGreen900 = "#1a3f1a"; // Very dark green — use sparingly
export const ColorGreen950 = "#0f2a0f"; // Darkest green
export const ColorBlue50 = "#eff6ff"; // Info tint — info message backgrounds
export const ColorBlue100 = "#dbeafe"; // Light blue — hover on info surfaces
export const ColorBlue200 = "#bfdbfe"; // Light blue — info borders
export const ColorBlue300 = "#93c5fd"; // Mid-light blue — info icon backgrounds
export const ColorBlue400 = "#60a5fa"; // Mid blue — info badges
export const ColorBlue500 = "#3b82f6"; // Base blue — info accents, supplementary links
export const ColorBlue600 = "#2563eb"; // Strong blue — info text on light backgrounds. 4.6:1 contrast on white
export const ColorBlue700 = "#1d4ed8"; // Dark blue — info headings
export const ColorBlue800 = "#1e40af"; // Deep blue — high-contrast info emphasis
export const ColorBlue900 = "#1e3a8a"; // Very dark blue — use sparingly
export const ColorBlue950 = "#172554"; // Darkest blue
export const ColorWhite = "#ffffff"; // Pure white — card backgrounds, inverse text, primary surface
export const ColorBlack = "#000000"; // Pure black — from brand swatch. Use sparingly; prefer neutral.800-900 for text
export const ColorTextPrimary = "#2c2e35"; // Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading
export const ColorTextSecondary = "#525252"; // Secondary text — helper text, descriptions, metadata, less prominent content
export const ColorTextTertiary = "#737373"; // Tertiary text — placeholders, timestamps, attribution, meta information
export const ColorTextDisabled = "#a3a3a3"; // Disabled text — clearly diminished but still readable for accessibility
export const ColorTextInverse = "#ffffff"; // Inverse text — white text on dark or coloured backgrounds (buttons, banners)
export const ColorTextBrand = "#b0610f"; // Brand-coloured text — links, inline brand emphasis. Copper tone meets AA on white (4.8:1)
export const ColorTextError = "#bc2f2f"; // Error text — form validation messages, error descriptions
export const ColorTextSuccess = "#3b7a3b"; // Success text — confirmation messages, positive feedback
export const ColorTextWarning = "#a36b00"; // Warning text — cautionary messages. Uses amber.700 for WCAG AA compliance on white (5.1:1)
export const ColorSurfaceDefault = "#ffffff"; // Default surface — main page background, card faces
export const ColorSurfaceSubtle = "#fafafa"; // Subtle surface — slight differentiation from default, alternate row backgrounds
export const ColorSurfaceRaised = "#ffffff"; // Raised surface — cards, elevated containers (distinguished by shadow rather than colour)
export const ColorSurfaceWarm = "#fef9f5"; // Warm surface — brand-tinted sections, promotional areas, upsell cards like 'Protect your plan'
export const ColorSurfaceCool = "#f2f5f6"; // Cool surface — calming sections, information panels, FAQ backgrounds
export const ColorSurfaceOverlay = "#00000080"; // Overlay surface — modal/dialog backdrop at 50% black
export const ColorBorderDefault = "#e8e8e8"; // Default border — cards, containers, resting input borders
export const ColorBorderStrong = "#a3a3a3"; // Strong border — emphasis borders, active input borders
export const ColorBorderSubtle = "#f5f5f5"; // Subtle border — section dividers, soft separators
export const ColorBorderBrand = "#ba834e"; // Brand border — focused inputs, selected cards, brand-accented containers
export const ColorBorderError = "#d64545"; // Error border — form fields with validation errors
export const ColorBorderSuccess = "#4a8f4a"; // Success border — validated fields, confirmed selections
export const ColorInteractiveDefault = "#b0610f"; // Default interactive — primary button fill, link colour, checkbox accent. Uses brand.600 (copper) for WCAG AA compliance (4.6:1 on white)
export const ColorInteractiveHover = "#8b4e0d"; // Hover state — deepened copper on hover for clear visual feedback
export const ColorInteractiveActive = "#6b3c13"; // Active/pressed state — dark brown during click/tap
export const ColorInteractiveDisabled = "#d4d4d4"; // Disabled interactive — muted grey, no pointer events
export const ColorInteractiveFocus = "#b0610f"; // Focus ring colour — keyboard navigation indicator, 2px outline with 2px offset
export const ColorInteractiveSecondary = "#4c5b6b"; // Secondary interactive — grey/sage buttons, less prominent actions
export const ColorInteractiveSecondaryHover = "#4c5459"; // Secondary interactive hover — darkened sage on hover
export const ColorFeedbackSuccess = "#3b7a3b"; // Success — confirmations, completed arrangement steps, booking confirmed
export const ColorFeedbackSuccessSubtle = "#f0f7f0"; // Success background — success message container fill, completion banners
export const ColorFeedbackWarning = "#cc8500"; // Warning — price change alerts, important notices, bond/insurance prompts
export const ColorFeedbackWarningSubtle = "#fff9eb"; // Warning background — warning message container fill, notice banners
export const ColorFeedbackError = "#bc2f2f"; // Error — form validation failures, system errors, payment issues
export const ColorFeedbackErrorSubtle = "#fef2f2"; // Error background — error message container fill, alert banners
export const ColorFeedbackInfo = "#2563eb"; // Info — helpful tips, supplementary information, guidance callouts
export const ColorFeedbackInfoSubtle = "#eff6ff"; // Info background — info message container fill, tip banners
export const ShadowSm = "0 1px 2px rgba(0,0,0,0.05)"; // Subtle lift — resting buttons, input focus subtle elevation
export const ShadowMd = "0 4px 6px rgba(0,0,0,0.07)"; // Medium elevation — cards at rest, dropdowns, popovers
export const ShadowLg = "0 10px 15px rgba(0,0,0,0.1)"; // High elevation — modals, popovers, card hover states
export const ShadowXl = "0 20px 25px rgba(0,0,0,0.1)"; // Maximum elevation — elevated panels, dialog boxes
export const OpacityDisabled = 0.4; // Disabled state — 40% opacity. Clearly diminished but still distinguishable
export const OpacityHover = 0.08; // Hover overlay — subtle 8% tint applied over backgrounds on hover
export const OpacityOverlay = 0.5; // Modal/dialog backdrop — 50% black overlay behind modals
export const Spacing1 = "4px"; // Tight — inline spacing, minimal gaps between related elements
export const Spacing2 = "8px"; // Small — related element gaps, compact padding, icon margins
export const Spacing3 = "12px"; // Component internal padding (small), chip padding
export const Spacing4 = "16px"; // Default component padding, form field gap, card grid gutter (mobile)
export const Spacing5 = "20px"; // Medium component spacing
export const Spacing6 = "24px"; // Card padding, section gap (small), card grid gutter (desktop)
export const Spacing8 = "32px"; // Section gap (medium), form section separation
export const Spacing10 = "40px"; // Section gap (large)
export const Spacing12 = "48px"; // Page section separation, vertical rhythm break
export const Spacing16 = "64px"; // Hero/banner vertical spacing
export const Spacing20 = "80px"; // Major page sections, large vertical spacing
export const Spacing05 = "2px"; // Hairline — icon-to-text tight spacing, fine adjustments
export const SpacingComponentXs = "4px"; // 4px — tight gaps: icon margins, chip internal padding
export const SpacingComponentSm = "8px"; // 8px — small padding: badge padding, inline element gaps
export const SpacingComponentMd = "16px"; // 16px — default padding: button padding, input padding, form field gap
export const SpacingComponentLg = "24px"; // 24px — large padding: card padding (desktop), modal padding
export const SpacingLayoutGutter = "16px"; // 16px — grid gutter on mobile, card grid gap
export const SpacingLayoutGutterDesktop = "24px"; // 24px — grid gutter on desktop
export const SpacingLayoutSection = "48px"; // 48px — vertical gap between page sections
export const SpacingLayoutPage = "64px"; // 64px — major page section separation, hero spacing
export const SpacingLayoutPagePadding = "16px"; // 16px — horizontal page padding on mobile
export const SpacingLayoutPagePaddingDesktop = "32px"; // 32px — horizontal page padding on desktop
export const BorderRadiusNone = "0px"; // Square corners — tables, dividers, sharp elements
export const BorderRadiusSm = "4px"; // Small radius — inputs, small interactive elements, chips
export const BorderRadiusMd = "8px"; // Medium radius — cards, buttons, dropdowns (default)
export const BorderRadiusLg = "12px"; // Large radius — modals, large cards
export const BorderRadiusXl = "16px"; // Extra large — feature cards, hero elements
export const BorderRadiusFull = "9999px"; // Full/pill — avatars, pill buttons, circular elements
export const FontFamilyBody =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif"; // Primary font — Montserrat. Used for headings (h1-h6), body text, labels, and all UI elements
export const FontFamilyDisplay =
  "'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
export const FontFamilyMono =
  "'JetBrains Mono', 'Fira Code', Consolas, monospace"; // Monospace font — for reference numbers (FA-2026-00847), tabular pricing data, and code
export const FontSize2xs = "0.6875rem"; // 11px — smallest UI text: compact captions, compact overlines
export const FontSizeXs = "0.75rem"; // 12px — small text: captions, labels, overlines, body/xs
export const FontSizeSm = "0.875rem"; // 14px — body small, labels, helper text
export const FontSizeBase = "1rem"; // 16px — default body text, heading/6, label/lg
export const FontSizeMd = "1.125rem"; // 18px — body large, heading/5
export const FontSizeLg = "1.25rem"; // 20px — heading/4
export const FontSizeXl = "1.5rem"; // 24px — heading/3
export const FontSize2xl = "1.875rem"; // 30px — heading/2
export const FontSize3xl = "2.25rem"; // 36px — heading/1
export const FontSize4xl = "3rem"; // 48px — reserved (legacy)
export const FontSizeDisplay1 = "4rem"; // 64px — display/1
export const FontSizeDisplay2 = "3.25rem"; // 52px — display/2
export const FontSizeDisplay3 = "2.5rem"; // 40px — display/3
export const FontSizeDisplaySm = "2rem"; // 32px — display/sm, smallest display text
export const FontSizeDisplayHero = "5rem"; // 80px — display/hero, largest display text
export const FontSizeMobileDisplayHero = "2rem"; // 32px — mobile display/hero (from 80px desktop)
export const FontSizeMobileDisplay1 = "1.75rem"; // 28px — mobile display/1 (from 64px desktop)
export const FontSizeMobileDisplay2 = "1.5rem"; // 24px — mobile display/2 (from 52px desktop)
export const FontSizeMobileDisplay3 = "1.375rem"; // 22px — mobile display/3 (from 40px desktop)
export const FontSizeMobileDisplaySm = "1.25rem"; // 20px — mobile display/sm (from 32px desktop)
export const FontSizeMobileH1 = "1.625rem"; // 26px — mobile heading/1 (from 36px desktop)
export const FontSizeMobileH2 = "1.375rem"; // 22px — mobile heading/2 (from 30px desktop)
export const FontSizeMobileH3 = "1.25rem"; // 20px — mobile heading/3 (from 24px desktop)
export const FontSizeMobileH4 = "1.125rem"; // 18px — mobile heading/4 (from 20px desktop)
export const FontSizeMobileH5 = "1rem"; // 16px — mobile heading/5 (from 18px desktop)
export const FontSizeMobileH6 = "0.875rem"; // 14px — mobile heading/6 (from 16px desktop)
export const FontWeightRegular = 400; // Regular weight — captions, display text (serif carries inherent weight)
export const FontWeightMedium = 500; // Medium weight — body text, labels. Slightly bolder than regular for improved readability
export const FontWeightSemibold = 600; // Semibold — overlines, button text, navigation
export const FontWeightBold = 700; // Bold — all headings (h1-h6)
export const LineHeightTight = 1.25; // Tight leading — large headings, display text
export const LineHeightSnug = 1.375; // Snug leading — sub-headings, labels, small text
export const LineHeightNormal = 1.5; // Normal leading — default body text, optimal readability
export const LineHeightRelaxed = 1.75; // Relaxed leading — large body text, long-form content
export const LetterSpacingTighter = "-0.02em"; // Tighter tracking — large display text
export const LetterSpacingTight = "-0.01em"; // Tight tracking — headings
export const LetterSpacingNormal = "0em"; // Normal tracking — body text, most content
export const LetterSpacingWide = "0.02em"; // Wide tracking — captions, small text
export const LetterSpacingWider = "0.05em"; // Wider tracking — labels, UI text
export const LetterSpacingWidest = "0.08em"; // Widest tracking — overlines, uppercase text
export const TypographyDisplayHeroFontFamily =
  "'Noto Serif SC', Georgia, 'Times New Roman', serif";
export const TypographyDisplayHeroFontSize = "5rem"; // 80px desktop
export const TypographyDisplayHeroFontSizeMobile = "2rem"; // 32px mobile
export const TypographyDisplayHeroFontWeight = 400; // 400 — serif carries inherent weight at large sizes
export const TypographyDisplayHeroLineHeight = 1.05;
export const TypographyDisplayHeroLetterSpacing = "-1.5px";
export const TypographyDisplay1FontFamily =
  "'Noto Serif SC', Georgia, 'Times New Roman', serif";
export const TypographyDisplay1FontSize = "4rem"; // 64px desktop
export const TypographyDisplay1FontSizeMobile = "1.75rem"; // 28px mobile
export const TypographyDisplay1FontWeight = 400;
export const TypographyDisplay1LineHeight = 1.078;
export const TypographyDisplay1LetterSpacing = "-1px";
export const TypographyDisplay2FontFamily =
  "'Noto Serif SC', Georgia, 'Times New Roman', serif";
export const TypographyDisplay2FontSize = "3.25rem"; // 52px desktop
export const TypographyDisplay2FontSizeMobile = "1.5rem"; // 24px mobile
export const TypographyDisplay2FontWeight = 400;
export const TypographyDisplay2LineHeight = 1.096;
export const TypographyDisplay2LetterSpacing = "-0.5px";
export const TypographyDisplay3FontFamily =
  "'Noto Serif SC', Georgia, 'Times New Roman', serif";
export const TypographyDisplay3FontSize = "2.5rem"; // 40px desktop
export const TypographyDisplay3FontSizeMobile = "1.375rem"; // 22px mobile
export const TypographyDisplay3FontWeight = 400;
export const TypographyDisplay3LineHeight = 1.15;
export const TypographyDisplay3LetterSpacing = "-0.25px";
export const TypographyDisplaySmFontFamily =
  "'Noto Serif SC', Georgia, 'Times New Roman', serif";
export const TypographyDisplaySmFontSize = "2rem"; // 32px desktop
export const TypographyDisplaySmFontSizeMobile = "1.25rem"; // 20px mobile
export const TypographyDisplaySmFontWeight = 400;
export const TypographyDisplaySmLineHeight = 1.1875;
export const TypographyDisplaySmLetterSpacing = "0px";
export const TypographyH1FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH1FontSize = "2.25rem"; // 36px desktop
export const TypographyH1FontSizeMobile = "1.625rem"; // 26px mobile
export const TypographyH1FontWeight = 700;
export const TypographyH1LineHeight = 1.194;
export const TypographyH1LetterSpacing = "-0.5px";
export const TypographyH2FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH2FontSize = "1.875rem"; // 30px desktop
export const TypographyH2FontSizeMobile = "1.375rem"; // 22px mobile
export const TypographyH2FontWeight = 700;
export const TypographyH2LineHeight = 1.267;
export const TypographyH2LetterSpacing = "-0.25px";
export const TypographyH3FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH3FontSize = "1.5rem"; // 24px desktop
export const TypographyH3FontSizeMobile = "1.25rem"; // 20px mobile
export const TypographyH3FontWeight = 700;
export const TypographyH3LineHeight = 1.292;
export const TypographyH3LetterSpacing = "0px";
export const TypographyH4FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH4FontSize = "1.25rem"; // 20px desktop
export const TypographyH4FontSizeMobile = "1.125rem"; // 18px mobile
export const TypographyH4FontWeight = 700;
export const TypographyH4LineHeight = 1.35;
export const TypographyH4LetterSpacing = "0px";
export const TypographyH5FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH5FontSize = "1.125rem"; // 18px desktop
export const TypographyH5FontSizeMobile = "1rem"; // 16px mobile
export const TypographyH5FontWeight = 700;
export const TypographyH5LineHeight = 1.389;
export const TypographyH5LetterSpacing = "0px";
export const TypographyH6FontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyH6FontSize = "1rem"; // 16px desktop
export const TypographyH6FontSizeMobile = "0.875rem"; // 14px mobile
export const TypographyH6FontWeight = 700;
export const TypographyH6LineHeight = 1.375;
export const TypographyH6LetterSpacing = "0px";
export const TypographyBodyLgFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyBodyLgFontSize = "1.125rem"; // 18px
export const TypographyBodyLgFontWeight = 500;
export const TypographyBodyLgLineHeight = 1.611;
export const TypographyBodyLgLetterSpacing = "0px";
export const TypographyBodyFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyBodyFontSize = "1rem"; // 16px
export const TypographyBodyFontWeight = 500;
export const TypographyBodyLineHeight = 1.625;
export const TypographyBodyLetterSpacing = "0px";
export const TypographyBodySmFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyBodySmFontSize = "0.875rem"; // 14px
export const TypographyBodySmFontWeight = 500;
export const TypographyBodySmLineHeight = 1.571;
export const TypographyBodySmLetterSpacing = "0px";
export const TypographyBodyXsFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyBodyXsFontSize = "0.75rem"; // 12px
export const TypographyBodyXsFontWeight = 500;
export const TypographyBodyXsLineHeight = 1.5;
export const TypographyBodyXsLetterSpacing = "0.1px";
export const TypographyLabelLgFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyLabelLgFontSize = "1rem"; // 16px
export const TypographyLabelLgFontWeight = 500;
export const TypographyLabelLgLineHeight = 1.3125;
export const TypographyLabelLgLetterSpacing = "0.1px";
export const TypographyLabelFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyLabelFontSize = "0.875rem"; // 14px
export const TypographyLabelFontWeight = 500;
export const TypographyLabelLineHeight = 1.286;
export const TypographyLabelLetterSpacing = "0.15px";
export const TypographyLabelSmFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyLabelSmFontSize = "0.75rem"; // 12px
export const TypographyLabelSmFontWeight = 500;
export const TypographyLabelSmLineHeight = 1.333;
export const TypographyLabelSmLetterSpacing = "0.2px";
export const TypographyCaptionFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyCaptionFontSize = "0.75rem"; // 12px
export const TypographyCaptionFontWeight = 500;
export const TypographyCaptionLineHeight = 1.417;
export const TypographyCaptionLetterSpacing = "0.2px";
export const TypographyCaptionSmFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyCaptionSmFontSize = "0.6875rem"; // 11px — accessibility floor
export const TypographyCaptionSmFontWeight = 500;
export const TypographyCaptionSmLineHeight = 1.364;
export const TypographyCaptionSmLetterSpacing = "0.2px";
export const TypographyOverlineFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyOverlineFontSize = "0.75rem"; // 12px
export const TypographyOverlineFontWeight = 600;
export const TypographyOverlineLineHeight = 1.333;
export const TypographyOverlineLetterSpacing = "1.5px";
export const TypographyOverlineSmFontFamily =
  "'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyOverlineSmFontSize = "0.6875rem"; // 11px — accessibility floor
export const TypographyOverlineSmFontWeight = 600;
export const TypographyOverlineSmLineHeight = 1.273;
export const TypographyOverlineSmLetterSpacing = "1.5px";