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

:root {
  --border-radius-none: 0px; /** No border radius. Sharp corners, formal elements. */
  --border-radius-sm: 4px; /** Small radius. Minimal rounding, subtle softness. */
  --border-radius-md: 8px; /** Medium radius. Standard UI elements, buttons, inputs. This is the most commonly used radius. */
  --border-radius-lg: 12px; /** Large radius. Cards, larger containers. */
  --border-radius-xl: 16px; /** Extra large radius. Prominent cards, feature boxes. */
  --border-radius-2xl: 24px; /** 2X large radius. Large cards, hero sections. */
  --border-radius-3xl: 32px; /** 3X large radius. Extra large containers. */
  --border-radius-4xl: 40px; /** 4X large radius. Nested cards (outer layer). Use when inner card has 8px radius with 16px spacing. */
  --border-radius-full: 9999px; /** Fully rounded. Pills, circular avatars, fully rounded elements. Can also use 50% in CSS. */
  --border-width-none: 0px; /** No border. */
  --border-width-thin: 1px; /** Thin border. Standard borders, dividers. */
  --border-width-medium: 2px; /** Medium border. Emphasis, focus states, active states. */
  --border-width-thick: 4px; /** Thick border. Strong emphasis, accent borders on feature cards. */
  --color-neutral-white: #fefdfd; /** Primary backgrounds, light UI surfaces. Use for main content areas and card backgrounds. AA contrast with dark text. */
  --color-neutral-off-white: #f9f5f3; /** Secondary backgrounds, card surfaces. Creates subtle hierarchy. AA contrast with text. */
  --color-neutral-light-gray: #f5eeeb; /** Tertiary backgrounds, disabled states. Test contrast before use with text. */
  --color-neutral-medium-gray: #ddd6d4; /** Borders, dividers, subtle accents. Use for non-critical elements. */
  --color-neutral-black: #030303; /** Primary text, high-emphasis content. Provides AAA contrast (21:1) on white backgrounds. */
  --color-neutral-dark-gray-1: #1b1b20; /** Secondary text, medium-emphasis content. AA contrast (15.8:1) on light backgrounds. */
  --color-neutral-dark-gray-2: #323236; /** Tertiary text, supporting content. Minimum AA contrast (11.9:1) required. */
  --color-neutral-dark-gray-3: #5f5f63; /** Placeholder text, low-emphasis content. Contrast ratio 5.2:1 on white (AA). */
  --color-primary-dark: #0e3269; /** Primary brand color for headers, key CTAs. Trustworthy, professional. Contrast ratio 10.31:1 on white (AAA). */
  --color-primary-base: #1b64d1; /** Interactive elements, links, primary buttons. Use for main actions. Contrast ratio 4.89:1 on white (AA). */
  --color-primary-light: #8db2e8; /** Hover states, accents, highlights. Adds visual variety to primary interactions. */
  --color-secondary-dark: #35626e; /** Secondary actions, supporting elements. Complements primary color. */
  --color-secondary-light: #6ac4db; /** Accents, hover states, secondary highlights. Adds freshness to design. */
  --color-secondary-pale: #b5e2ed; /** Backgrounds, subtle accents, badges. Very light secondary color for backgrounds. */
  --color-tertiary-dark: #756238; /** Tertiary emphasis, premium features. Warm accent for special elements. */
  --color-tertiary-base: #eac370; /** Highlights, badges, success states. Warm gold for positive emphasis. */
  --color-tertiary-light: #f5e1b8; /** Backgrounds, subtle accents. Light warm background color. */
  --color-quaternary-dark: #46594a; /** Quaternary emphasis, nature themes. Natural, calming accent. */
  --color-quaternary-base: #8bb293; /** Success states, positive feedback. Natural green for confirmations. */
  --color-quaternary-light: #c5d9c9; /** Subtle backgrounds, soft accents. Light natural green background. */
  --color-success-dark-high: #359170; /** Success dark high emphasis. Use for success messages on dark backgrounds, confirmations. Matches Figma Success/dark/high. */
  --color-success-dark-low: #102b22; /** Success dark low emphasis. Use for dark mode backgrounds, deep accents. Matches Figma Success/dark/low. */
  --color-success-light-high: #205743; /** Success light high emphasis. Use for success states on light backgrounds. Matches Figma Success/light/high. */
  --color-success-light-low: #9ac8b8; /** Success light low emphasis. Use for success backgrounds, subtle fills in light mode. Matches Figma Success/light/low. */
  --color-destructive-high: #ff0900; /** Primary error/destructive color. Use for error states, destructive CTAs, critical alerts. Matches Figma Destructive/High. */
  --color-destructive-low: #ff9d99; /** Light destructive color. Use for error backgrounds, destructive tints. For backgrounds only, not text. Matches Figma Destructive/Low. */
  --color-warning-base: #eac370; /** Warning color. Use for warnings, caution messages, attention-needed states. */
  --color-warning-background: #f5e1b8; /** Warning background. Use for warning message backgrounds. */
  --color-warning-text: #756238; /** Warning text color. Use for text on warning backgrounds. */
  --color-info-base: #6ac4db; /** Information color. Use for informational messages, tips, helpful hints. */
  --color-info-background: #b5e2ed; /** Information background. Use for info message backgrounds. */
  --color-info-text: #35626e; /** Information text color. Use for text on info backgrounds. */
  --color-disabled-dark: #292524; /** Disabled dark color. Use for disabled elements on light backgrounds. Matches Figma disabled/dark. */
  --color-disabled-light: #e7e5e4; /** Disabled light color. Use for disabled backgrounds, subtle borders. Matches Figma disabled/light. */
  --spacing-base: 4px; /** Base spacing unit. All spacing values are multiples of this. */
  --spacing-scale-1: 4px; /** Minimal padding, tight spacing. 0.25rem. */
  --spacing-scale-2: 8px; /** Small gaps, compact layouts. 0.5rem. */
  --spacing-scale-3: 12px; /** Medium-small spacing. 0.75rem. */
  --spacing-scale-4: 16px; /** Standard spacing, paragraph gaps. 1rem. */
  --spacing-scale-5: 20px; /** Medium spacing. 1.25rem. */
  --spacing-scale-6: 24px; /** Medium-large spacing. 1.5rem. */
  --spacing-scale-8: 32px; /** Large spacing, section separation. 2rem. */
  --spacing-scale-10: 40px; /** Extra large spacing. 2.5rem. */
  --spacing-scale-12: 48px; /** Spacious sections. 3rem. */
  --spacing-scale-16: 64px; /** Major section breaks. 4rem. */
  --spacing-scale-20: 80px; /** Hero sections. 5rem. */
  --spacing-scale-24: 96px; /** Very large gaps. 6rem. */
  --spacing-scale-32: 128px; /** Massive spacing. 8rem. */
  --spacing-scale-64: 256px; /** Extreme spacing (rare use). 16rem. */
  --spacing-inset-square-1: 4px; /** Minimal button padding, tight containers. Equal padding on all sides. */
  --spacing-inset-square-2: 8px; /** Small buttons, compact cards. Equal padding on all sides. */
  --spacing-inset-square-4: 16px; /** Standard buttons, form inputs. Equal padding on all sides. */
  --spacing-inset-square-6: 24px; /** Card padding, content containers. Equal padding on all sides. */
  --spacing-inset-square-8: 32px; /** Large cards, spacious containers. Equal padding on all sides. */
  --spacing-inset-square-12: 48px; /** Hero sections, feature blocks. Equal padding on all sides. */
  --spacing-inset-square-16: 64px; /** Page-level padding, major containers. Equal padding on all sides. */
  --spacing-inset-squish-sm: 8px 16px; /** Small buttons, tags. Vertical 8px, Horizontal 16px. */
  --spacing-inset-squish-md: 12px 24px; /** Medium buttons, pills. Vertical 12px, Horizontal 24px. */
  --spacing-inset-squish-lg: 16px 32px; /** Large buttons, input fields. Vertical 16px, Horizontal 32px. */
  --spacing-inset-squish-xl: 24px 48px; /** Hero buttons, prominent CTAs. Vertical 24px, Horizontal 48px. */
  --spacing-grid-desktop-columns: 12; /** Number of grid columns for desktop layouts (1024px+). */
  --spacing-grid-desktop-gutter: 24px; /** Gutter width between grid columns on desktop. */
  --spacing-grid-desktop-margin: 64px; /** Left/right margin for desktop layouts. */
  --spacing-grid-desktop-max-width: 1440px; /** Maximum content width for desktop layouts. */
  --spacing-grid-tablet-columns: 8; /** Number of grid columns for tablet layouts (768px - 1023px). */
  --spacing-grid-tablet-gutter: 16px; /** Gutter width between grid columns on tablet. */
  --spacing-grid-tablet-margin: 32px; /** Left/right margin for tablet layouts. */
  --spacing-grid-mobile-columns: 4; /** Number of grid columns for mobile layouts (320px - 767px). */
  --spacing-grid-mobile-gutter: 16px; /** Gutter width between grid columns on mobile. */
  --spacing-grid-mobile-margin: 16px; /** Left/right margin for mobile layouts. */
  --typography-font-family-primary: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /** Primary typeface for all brand executions. Geometric sans-serif that balances modern clarity with friendly approachability. */
  --typography-font-weight-light: 300; /** Light weight. Use sparingly, for large display text only. */
  --typography-font-weight-regular: 400; /** Regular weight. Use for body text, standard UI elements. */
  --typography-font-weight-medium: 500; /** Medium weight. Use for subheadings, emphasis, buttons. */
  --typography-font-weight-semibold: 600; /** SemiBold weight. Use for headings, important labels. */
  --typography-font-weight-bold: 700; /** Bold weight. Use for major headings, high emphasis. */
  --typography-letter-spacing-tight: -0.5px; /** Tight letter spacing. Use for large display text. */
  --typography-letter-spacing-normal: 0px; /** Normal letter spacing. Use for most text. */
  --typography-letter-spacing-loose: 0.25px; /** Loose letter spacing. Use for labels, captions, small text. */
  --typography-letter-spacing-extra-loose: 0.5px; /** Extra loose letter spacing. Use for button text, CTAs. */
  --typography-scale-display-1-font-size: 48px; /** Display 1 font size. 3rem. Hero headlines, landing pages. */
  --typography-scale-display-1-line-height: 56px; /** Display 1 line height. 1.167 ratio. */
  --typography-scale-display-2-font-size: 40px; /** Display 2 font size. 2.5rem. Section headers, major titles. */
  --typography-scale-display-2-line-height: 48px; /** Display 2 line height. 1.2 ratio. */
  --typography-scale-display-2-letter-spacing: -0.25px;
  --typography-scale-heading-1-font-size: 32px; /** Heading 1 font size. 2rem. Page titles, primary headings. */
  --typography-scale-heading-1-line-height: 40px; /** Heading 1 line height. 1.25 ratio. */
  --typography-scale-heading-2-font-size: 24px; /** Heading 2 font size. 1.5rem. Section headings. */
  --typography-scale-heading-2-line-height: 32px; /** Heading 2 line height. 1.333 ratio. */
  --typography-scale-heading-3-font-size: 20px; /** Heading 3 font size. 1.25rem. Subsection headings. */
  --typography-scale-heading-3-line-height: 28px; /** Heading 3 line height. 1.4 ratio. */
  --typography-scale-heading-4-font-size: 18px; /** Heading 4 font size. 1.125rem. Card titles, component headings. */
  --typography-scale-heading-4-line-height: 24px; /** Heading 4 line height. 1.333 ratio. */
  --typography-scale-body-large-font-size: 18px; /** Body Large font size. 1.125rem. Lead paragraphs, important body text. */
  --typography-scale-body-large-line-height: 28px; /** Body Large line height. 1.556 ratio. */
  --typography-scale-body-font-size: 16px; /** Body Regular font size. 1rem. Standard body text, descriptions. */
  --typography-scale-body-line-height: 24px; /** Body Regular line height. 1.5 ratio. */
  --typography-scale-body-small-font-size: 14px; /** Body Small font size. 0.875rem. Secondary text, captions. */
  --typography-scale-body-small-line-height: 20px; /** Body Small line height. 1.429 ratio. */
  --typography-scale-label-font-size: 14px; /** Label font size. 0.875rem. Form labels, UI labels. */
  --typography-scale-label-line-height: 20px; /** Label line height. 1.429 ratio. */
  --typography-scale-caption-font-size: 12px; /** Caption font size. 0.75rem. Timestamps, metadata, fine print. */
  --typography-scale-caption-line-height: 16px; /** Caption line height. 1.333 ratio. */
  --typography-scale-button-font-size: 16px; /** Button font size. 1rem. Button text, CTAs. */
  --typography-scale-button-line-height: 24px; /** Button line height. 1.5 ratio. */
  --typography-responsive-mobile-display-1: 32px; /** Display 1 mobile size (320px - 767px). */
  --typography-responsive-mobile-display-2: 28px; /** Display 2 mobile size. */
  --typography-responsive-mobile-heading-1: 24px; /** Heading 1 mobile size. */
  --typography-responsive-mobile-heading-2: 20px; /** Heading 2 mobile size. */
  --typography-responsive-mobile-body: 16px; /** Body mobile size. */
  --typography-responsive-tablet-display-1: 40px; /** Display 1 tablet size (768px - 1023px). */
  --typography-responsive-tablet-display-2: 32px; /** Display 2 tablet size. */
  --typography-responsive-tablet-heading-1: 28px; /** Heading 1 tablet size. */
  --typography-responsive-tablet-heading-2: 22px; /** Heading 2 tablet size. */
  --typography-responsive-tablet-body: 16px; /** Body tablet size. */
  --color-text-primary: var(--color-neutral-black); /** Primary text color. Use for main content, headings. Contrast 21:1 on white (AAA). */
  --color-text-secondary: var(--color-neutral-dark-gray-1); /** Secondary text color. Use for supporting content. Contrast 15.8:1 on white (AAA). */
  --color-text-tertiary: var(--color-neutral-dark-gray-2); /** Tertiary text color. Use for less important content. Contrast 11.9:1 on white (AAA). */
  --color-text-disabled: var(--color-neutral-dark-gray-3); /** Disabled text color. Use for inactive elements. Contrast 5.2:1 on white (AA). */
  --color-text-link: var(--color-primary-base); /** Link text color. Use for interactive text elements. Contrast 4.89:1 on white (AA). */
  --color-text-inverse: var(--color-neutral-white); /** Inverse text color. Use on dark backgrounds. Contrast 21:1 on black (AAA). */
  --color-background-primary: var(--color-neutral-white); /** Primary background color. Main page background, content areas. */
  --color-background-secondary: var(--color-neutral-off-white); /** Secondary background color. Card backgrounds, alternate sections. */
  --color-background-tertiary: var(--color-neutral-light-gray); /** Tertiary background color. Disabled states, subtle backgrounds. */
  --color-border-default: var(--color-neutral-medium-gray); /** Default border color. Use for standard borders, dividers. */
  --color-border-subtle: var(--color-neutral-light-gray); /** Subtle border color. Use for very light borders, minimal separation. */
  --color-border-emphasis: var(--color-neutral-dark-gray-2); /** Emphasized border color. Use for important borders, focus states. */
  --color-brand-primary: var(--color-primary-base); /** Primary brand color. Use for main CTAs, interactive elements. */
  --color-brand-primary-dark: var(--color-primary-dark); /** Dark brand color. Use for headers, hover states on primary elements. */
  --color-brand-primary-light: var(--color-primary-light); /** Light brand color. Use for hover states, accents, highlights. */
  --color-brand-secondary: var(--color-secondary-light); /** Secondary brand color. Use for secondary actions, variety. */
  --color-brand-accent-warm: var(--color-tertiary-base); /** Warm accent color. Use for highlights, badges, special emphasis. */
  --color-brand-accent-natural: var(--color-quaternary-base); /** Natural accent color. Use for nature-themed content, balance. */
  --color-interactive-default: var(--color-primary-base); /** Default interactive element color. Buttons, links, clickable elements. */
  --color-interactive-hover: var(--color-primary-dark); /** Hover state color. Use when users hover over interactive elements. */
  --color-interactive-active: var(--color-primary-dark); /** Active/pressed state color. Use when users click/press elements. */
  --color-interactive-focus: var(--color-primary-base); /** Focus state color. Use for keyboard focus indicators. */
  --typography-scale-display-1-font-weight: var(--typography-font-weight-bold);
  --typography-scale-display-1-letter-spacing: var(--typography-letter-spacing-tight);
  --typography-scale-display-2-font-weight: var(--typography-font-weight-bold);
  --typography-scale-heading-1-font-weight: var(--typography-font-weight-semibold);
  --typography-scale-heading-1-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-heading-2-font-weight: var(--typography-font-weight-semibold);
  --typography-scale-heading-2-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-heading-3-font-weight: var(--typography-font-weight-semibold);
  --typography-scale-heading-3-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-heading-4-font-weight: var(--typography-font-weight-medium);
  --typography-scale-heading-4-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-body-large-font-weight: var(--typography-font-weight-regular);
  --typography-scale-body-large-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-body-font-weight: var(--typography-font-weight-regular);
  --typography-scale-body-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-body-small-font-weight: var(--typography-font-weight-regular);
  --typography-scale-body-small-letter-spacing: var(--typography-letter-spacing-normal);
  --typography-scale-label-font-weight: var(--typography-font-weight-medium);
  --typography-scale-label-letter-spacing: var(--typography-letter-spacing-loose);
  --typography-scale-caption-font-weight: var(--typography-font-weight-regular);
  --typography-scale-caption-letter-spacing: var(--typography-letter-spacing-loose);
  --typography-scale-button-font-weight: var(--typography-font-weight-medium);
  --typography-scale-button-letter-spacing: var(--typography-letter-spacing-extra-loose);
}