/**
 * Elcogen Design Tokens - Unified
 *
 * This file consolidates ALL design tokens from Figma and semantic aliases.
 * Generated from: design-tokens.css + elcogen-design-tokens.css
 *
 * WARNING: When syncing from Figma, this file will be regenerated.
 * Do not edit manually - changes will be overwritten.
 */

:root {
	/* ============================================
	   COLORS - Base Tokens from Figma
	   ============================================ */

	/* Button Theme Colors */
	--color-theme-primary-text-default: #FFFFFF;
	--color-theme-primary-background-default: #1E1C25;
	--color-theme-primary-border-default: #1E1C25;
	--color-theme-primary-background-hover: #0C28C4;
	--color-theme-primary-border-hover: #0C28C4;
	--color-theme-primary-text-hover: #FFFFFF;
	--color-theme-primary-text-active: #FFFFFF;
	--color-theme-primary-background-active: #1E1C25;
	--color-theme-primary-border-active: #1E1C25;
	--color-theme-secondary-text-default: #1E1C25;
	--color-theme-secondary-background-default: #00000000;
	--color-theme-secondary-border-default: #1E1C25;
	--color-theme-neutral-text-default: #1E1C25;
	--color-theme-neutral-background-default: #00000000;
	--color-theme-neutral-border-default: #00000000;
	--color-theme-danger-text-default: #FFFFFF;
	--color-theme-danger-background-default: #D74B3E;
	--color-theme-danger-border-default: #D74B3E;

	/* Focus Ring Colors */
	--color-inner-color: #FFFFFF;
	--color-outer-color: #0092C1;

	/* Core Colors - Figma naming */
	--color-text-primary: #131317;
	--color-brand-primary: #1E1C25;

	/* Neutral Colors - Figma naming */
	--color-neutral-neutral-100: #FFFFFF;
	--color-neutral-neutral-200: #F2F1F2;
	--color-neutral-neutral-300: #DBD8DF;
	--color-neutral-neutral-400: #C2C0C9;
	--color-neutral-neutral-500: #8A8797;
	--color-neutral-neutral-600: #686878;
	--color-neutral-neutral-700: #403F47;
	--color-neutral-neutral-800: #30323B;
	--color-neutral-neutral-900: #1E1C25;
	--color-neutral-neutral-1000: #131317;

	/* Light Blue - Figma naming */
	--color-light-blue-light-blue-100: #E6F9FF;
	--color-light-blue-light-blue-200: #CCF3FF;
	--color-light-blue-light-blue-300: #BEEFFF;
	--color-light-blue-light-blue-400: #00C1FF;
	--color-light-blue-light-blue-500: #0092C1;
	--color-light-blue-light-blue-600: #004D66;

	/* Cobalt Blue - Figma naming */
	--color-cobalt-blue-cobalt-blue-100: #E0E8F8;
	--color-cobalt-blue-cobalt-blue-200: #86A8E2;
	--color-cobalt-blue-cobalt-blue-300: #3D53D0;
	--color-cobalt-blue-cobalt-blue-400: #0C28C4;
	--color-cobalt-blue-cobalt-blue-500: #081C89;
	--color-cobalt-blue-cobalt-blue-600: #05104E;

	/* Green - Figma naming */
	--color-green-green-100: #F4FFF6;
	--color-green-green-200: #D2FFDB;
	--color-green-green-300: #B0FFC1;
	--color-green-green-400: #8EFFA6;
	--color-green-green-500: #2D6A3A;

	/* Yellow - Figma naming */
	--color-yellow-yellow-100: #FEFEDE;
	--color-yellow-yellow-200: #FBFD9D;
	--color-yellow-yellow-300: #F9FC5C;
	--color-yellow-yellow-400: #574D00;

	/* ============================================
	   COLORS - Semantic Aliases (easier to use)
	   ============================================ */

	/* Cobalt Blue Semantic */
	--color-cobalt-blue-400: #0C28C4;
	--color-cobalt-blue-500: #081C89;
	--color-cobalt-blue-600: #05104E;

	/* Neutral Semantic */
	--color-dark-neutral: #1E1C25;
	--color-dark-neutral-hover: #403F47;
	--color-text-secondary: #05104E;
	--color-white: #FFFFFF;
	--color-neutral-200: #C2C0C9;
	--color-neutral-300: #C2C0C9;

	/* Light Blue Semantic */
	--color-light-blue-100: #E6F9FF;
	--color-light-blue-200: #CCF3FF;
	--color-light-blue-300: #BEEFFF;
	--color-light-blue-400: #00C1FF;

	/* Purple Semantic */
	--color-light-purple-100: #E0E8F8;

	/* Background Semantic */
	--color-background-primary: #FFFFFF;
	--color-background-secondary: #E6F9FF;
	--color-background-light: #F2F1F2;

	/* ============================================
	   TYPOGRAPHY - Font Families
	   ============================================ */

	/* Figma naming */
	--font-family-font-familyes-headings: 'cairo', sans-serif;
	--font-family-font-familyes-body: 'Afacad', sans-serif;
	--font-family-font-familyes-documentation: 'inter', sans-serif;
	--font-family-font-familyes-links: 'Afacad', sans-serif;

	/* Semantic naming */
	--font-family-headings: 'cairo', sans-serif;
	--font-family-body: 'Afacad', sans-serif;

	/* ============================================
	   TYPOGRAPHY - Font Weights
	   ============================================ */

	/* Figma naming */
	--font-weight-font-weights-light: 300;
	--font-weight-font-weights-regular: 400;
	--font-weight-font-weights-semi-bold: 600;
	--font-weight-font-weights-bold: 700;

	/* Semantic naming */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* ============================================
	   TYPOGRAPHY - Font Sizes
	   ============================================ */

	/* Figma naming - Headings */
	--font-size-semantic-sizes-headings-h1-hero-title-font-size: 6.625rem;
	--font-size-semantic-sizes-headings-h1-font-size: 3.5625rem;
	--font-size-semantic-sizes-headings-h2-font-size: 3rem;
	--font-size-semantic-sizes-headings-display-l-font-size: 3rem;
	--font-size-semantic-sizes-headings-h3-font-size: 2.75rem;
	--font-size-semantic-sizes-headings-h4-font-size: 2.375rem;
	--font-size-semantic-sizes-headings-display-m-font-size: 2.0625rem;
	--font-size-semantic-sizes-headings-h5-font-size: 1.5625rem;
	--font-size-semantic-sizes-headings-h6-font-size: 1.1875rem;

	/* Figma naming - Body & Other */
	--font-size-semantic-sizes-documentation-page-header-font-size: 3.5625rem;
	--font-size-semantic-sizes-documentation-colors-list-font-size: 1rem;
	--font-size-semantic-sizes-accordion-large-font-size: 1.4375rem;
	--font-size-semantic-sizes-body-large-font-size: 1.3125rem;
	--font-size-semantic-sizes-body-medium-font-size: 1.125rem;
	--font-size-semantic-sizes-body-small-font-size: 1rem;
	--font-size-semantic-sizes-body-extra-small-font-size: 0.875rem;
	--font-size-semantic-sizes-links-large-font-size: 1.1875rem;
	--font-size-semantic-sizes-links-medium-font-size: 1.125rem;
	--font-size-semantic-sizes-links-small-font-size: 1rem;

	/* Semantic naming */
	--font-size-display: 6.625rem;
	--font-size-h1: 3.5625rem;
	--font-size-h2: 3rem;
	--font-size-h3: 2.75rem;
	--font-size-h4: 2.0625rem;
	--font-size-h5: 1.5625rem;
	--font-size-body-xlarge: 1.4375rem;
	--font-size-body-large: 1.3125rem;
	--font-size-body-medium: 1.125rem;
	--font-size-body-base: 1rem;
	--font-size-body-small: 0.875rem;
	--font-size-caption: 0.75rem;

	/* ============================================
	   TYPOGRAPHY - Line Heights
	   ============================================ */

	/* Figma naming - Headings */
	--line-height-semantic-sizes-headings-h1-hero-title-line-height: 7.5rem;
	--line-height-semantic-sizes-headings-h1-line-height: 4.5rem;
	--line-height-semantic-sizes-headings-h2-line-height: 4.5rem;
	--line-height-semantic-sizes-headings-display-l-line-height: 4.5rem;
	--line-height-semantic-sizes-headings-h3-line-height: 4rem;
	--line-height-semantic-sizes-headings-h4-line-height: 2.4375rem;
	--line-height-semantic-sizes-headings-display-m-line-height: 3rem;
	--line-height-semantic-sizes-headings-h5-line-height: 2.4375rem;
	--line-height-semantic-sizes-headings-h6-line-height: 2rem;

	/* Figma naming - Body & Other */
	--line-height-semantic-sizes-documentation-page-header-line-height: 3rem;
	--line-height-semantic-sizes-documentation-colors-list-line-height: 1.5rem;
	--line-height-semantic-sizes-accordion-large-line-height: 2rem;
	--line-height-semantic-sizes-body-large-line-height: 2.4375rem;
	--line-height-semantic-sizes-body-medium-line-height: 1.75rem;
	--line-height-semantic-sizes-body-small-line-height: 1.5rem;
	--line-height-semantic-sizes-body-extra-small-line-height: 1rem;
	--line-height-semantic-sizes-links-large-line-height: 1.9375rem;
	--line-height-semantic-sizes-links-medium-line-height: 1.75rem;
	--line-height-semantic-sizes-links-small-line-height: 1.5rem;

	/* Semantic naming */
	--line-height-display: 7.5rem;
	--line-height-h1: 4.5rem;
	--line-height-h2: 4.5rem;
	--line-height-h3: 4rem;
	--line-height-h4: 3rem;
	--line-height-h5: 2.4375rem;
	--line-height-body-xlarge: 2rem;
	--line-height-body-large: 2.4375rem;
	--line-height-body-medium: 1.75rem;
	--line-height-body-base: 1.5rem;
	--line-height-body-small: 1rem;
	--line-height-caption: 1.125rem;

	/* ============================================
	   TYPOGRAPHY - Text Composite Styles
	   ============================================ */

	--text-headings-h1-for-subpage-hero-heading-family: 'cairo', sans-serif;
	--text-headings-h1-for-subpage-hero-heading-size: 6.625rem;
	--text-headings-h1-for-subpage-hero-heading-weight: 600;
	--text-headings-h1-for-subpage-hero-heading-line-height: 7.5rem;
	--text-headings-h1-for-subpage-hero-heading-letter-spacing: 0rem;

	--text-headings-h1-family: 'cairo', sans-serif;
	--text-headings-h1-size: 3.5625rem;
	--text-headings-h1-weight: 600;
	--text-headings-h1-line-height: 4.5rem;
	--text-headings-h1-letter-spacing: 0rem;

	--text-headings-h2-family: 'cairo', sans-serif;
	--text-headings-h2-size: 3rem;
	--text-headings-h2-weight: 600;
	--text-headings-h2-line-height: 4.5rem;
	--text-headings-h2-letter-spacing: 0rem;

	--text-headings-display-l-family: 'cairo', sans-serif;
	--text-headings-display-l-size: 3rem;

	--text-headings-h3-family: 'cairo', sans-serif;
	--text-headings-h3-size: 2.75rem;
	--text-headings-h3-weight: 600;
	--text-headings-h3-line-height: 4rem;
	--text-headings-h3-letter-spacing: 0rem;

	--text-headings-h4-family: 'cairo', sans-serif;
	--text-headings-h4-size: 2.375rem;
	--text-headings-h4-weight: 600;
	--text-headings-h4-line-height: 2.4375rem;
	--text-headings-h4-letter-spacing: 0rem;

	--text-headings-display-m-family: 'cairo', sans-serif;
	--text-headings-display-m-size: 2.0625rem;

	--text-headings-h5-family: 'cairo', sans-serif;
	--text-headings-h5-size: 1.5625rem;
	--text-headings-h5-weight: 700;
	--text-headings-h5-line-height: 2.4375rem;
	--text-headings-h5-letter-spacing: 0rem;

	--text-headings-h6-family: 'cairo', sans-serif;
	--text-headings-h6-size: 1.1875rem;
	--text-headings-h6-weight: 700;
	--text-headings-h6-line-height: 2rem;
	--text-headings-h6-letter-spacing: 0rem;

	--text-documentation-page-header-family: 'inter', sans-serif;
	--text-documentation-page-header-size: 3.5625rem;
	--text-documentation-page-header-weight: 700;
	--text-documentation-page-header-line-height: 3rem;
	--text-documentation-page-header-letter-spacing: 0rem;

	--text-documentation-colors-list-family: 'inter', sans-serif;
	--text-documentation-colors-list-size: 1rem;
	--text-documentation-colors-list-weight: 400;
	--text-documentation-colors-list-line-height: 1.5rem;
	--text-documentation-colors-list-letter-spacing: 0rem;

	--text-accordion-title-family: 'Afacad', sans-serif;
	--text-accordion-title-size: 1.4375rem;
	--text-accordion-title-weight: 600;
	--text-accordion-title-line-height: 2rem;
	--text-accordion-title-letter-spacing: 0rem;

	--text-body-large-family: 'Afacad', sans-serif;
	--text-body-large-size: 1.3125rem;
	--text-body-large-weight: 400;
	--text-body-large-line-height: 2.4375rem;
	--text-body-large-letter-spacing: 0rem;

	--text-body-large-bold-family: 'Afacad', sans-serif;
	--text-body-large-bold-size: 1.3125rem;
	--text-body-large-bold-weight: 700;
	--text-body-large-bold-line-height: 2.4375rem;
	--text-body-large-bold-letter-spacing: 0rem;

	--text-body-medium-family: 'Afacad', sans-serif;
	--text-body-medium-size: 1.125rem;
	--text-body-medium-weight: 400;
	--text-body-medium-line-height: 1.75rem;
	--text-body-medium-letter-spacing: 0rem;

	--text-body-medium-bold-family: 'Afacad', sans-serif;
	--text-body-medium-bold-size: 1.125rem;
	--text-body-medium-bold-weight: 700;
	--text-body-medium-bold-line-height: 1.75rem;
	--text-body-medium-bold-letter-spacing: 0rem;

	--text-body-small-family: 'Afacad', sans-serif;
	--text-body-small-size: 1rem;
	--text-body-small-weight: 400;
	--text-body-small-line-height: 1.5rem;
	--text-body-small-letter-spacing: 0rem;

	--text-body-small-bold-family: 'Afacad', sans-serif;
	--text-body-small-bold-size: 1rem;
	--text-body-small-bold-weight: 700;
	--text-body-small-bold-line-height: 1.5rem;
	--text-body-small-bold-letter-spacing: 0rem;

	--text-body-extra-small-family: 'Afacad', sans-serif;
	--text-body-extra-small-size: 0.875rem;
	--text-body-extra-small-weight: 400;
	--text-body-extra-small-line-height: 1rem;
	--text-body-extra-small-letter-spacing: 0rem;

	--text-links-large-family: 'Afacad', sans-serif;
	--text-links-large-size: 1.1875rem;
	--text-links-large-weight: 400;
	--text-links-large-line-height: 1.9375rem;
	--text-links-large-letter-spacing: 0rem;

	--text-links-medium-family: 'Afacad', sans-serif;
	--text-links-medium-size: 1.125rem;
	--text-links-medium-weight: 400;
	--text-links-medium-line-height: 1.75rem;
	--text-links-medium-letter-spacing: 0rem;

	--text-links-small-family: 'Afacad', sans-serif;
	--text-links-small-size: 1rem;
	--text-links-small-weight: 400;
	--text-links-small-line-height: 1.5rem;
	--text-links-small-letter-spacing: 0rem;

	/* ============================================
	   SPACING - Figma Sizing Tokens
	   ============================================ */

	/* Padding - Figma naming */
	--padding-sizing-lg-padding-x: 1.875rem;
	--padding-sizing-lg-padding-y: 0.625rem;
	--padding-sizing-md-padding-x: 0.625rem;
	--padding-sizing-md-padding-y: 0.375rem;
	--padding-sizing-sm-padding-x: 0.875rem;
	--padding-sizing-sm-padding-y: 0.125rem;

	/* Border Radius - Figma naming */
	--radius-sizing-lg-corner-radius: 22.5rem;
	--radius-sizing-md-corner-radius: 22.5rem;
	--radius-sizing-sm-corner-radius: 22.5rem;

	/* Border Width - Figma naming */
	--border-width-sizing-lg-border-width: 2px;
	--border-width-sizing-md-border-width: 2px;
	--border-width-sizing-sm-border-width: 2px;

	/* Gap - Figma naming */
	--gap-sizing-lg-inner-spacing: 0.25rem;

	/* ============================================
	   SPACING - Semantic System (Baseline Grid)
	   ============================================ */

	--spacing-baseline-04: 0.25rem;
	--spacing-baseline-06: 0.375rem;
	--spacing-baseline-10: 0.625rem;
	--spacing-baseline-08: 0.5rem;
	--spacing-baseline-12: 0.75rem;
	--spacing-baseline-16: 1rem;
	--spacing-baseline-20: 1.25rem;
	--spacing-baseline-24: 1.5rem;
	--spacing-baseline-32: 2rem;
	--spacing-baseline-40: 2.5rem;
	--spacing-baseline-48: 3rem;
	--spacing-baseline-56: 3.5rem;
	--spacing-baseline-64: 4rem;
	--spacing-baseline-80: 5rem;
	--spacing-baseline-96: 6rem;
	--spacing-baseline-120: 7.5rem;

	/* Component-specific spacing */
	--spacing-card-padding: 1.5rem;
	--spacing-section-vertical: 4.5rem;
	--spacing-section-vertical-mobile: 6rem;

	/* ============================================
	   BORDER RADIUS - Semantic
	   ============================================ */

	--radius-small: 0.5rem;
	--radius-medium: 0.75rem;
	--radius-large: 1.25rem;
	--radius-pill: 22.5rem;

	/* ============================================
	   TRANSITIONS
	   ============================================ */

	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	--transition-all: all 0.3s ease;
	--transition-background: background-color 0.3s ease;
	--transition-color: color 0.3s ease;
	--transition-transform: transform 0.3s ease;
	--transition-opacity: opacity 0.3s ease;

	/* ============================================
	   SHADOWS
	   ============================================ */

	--shadow-small: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
	--shadow-medium: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
	--shadow-large: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

	/* ============================================
	   CONTAINER WIDTHS
	   ============================================ */

	--container-narrow: 73.5rem;
	--container-default: 88.5rem;
	--container-wide: 112.125rem;

	/* ============================================
	   Z-INDEX SCALE
	   ============================================ */

	--z-index-dropdown: 100;
	--z-index-sticky: 200;
	--z-index-overlay: 300;
	--z-index-modal: 400;
	--z-index-notification: 500;

	/* ============================================
	   BREAKPOINTS
	   ============================================ */

	--breakpoint-mobile: 48rem;
	--breakpoint-tablet: 64rem;

	/* ============================================
	   COMPONENT TOKENS - Buttons
	   ============================================ */

	--button-padding-small: 0.25rem 1rem;
	--button-padding-medium: 0.5rem 1.1875rem 0.5rem 0.75rem;
	--button-padding-large: 0.75rem 1.5rem;
	--button-border-width: 2px;

	/* ============================================
	   COMPONENT TOKENS - Links
	   ============================================ */

	--link-underline-offset: 0.25rem;
	--link-underline-thickness: 0.0625rem;

	/* ============================================
	   COMPONENT TOKENS - Cards
	   ============================================ */

	--card-hover-background: #CCF3FF;

	/* ============================================
	   COMPONENT TOKENS - Focus States
	   ============================================ */

	--focus-outline-width: 0.125rem;
	--focus-outline-color: #0C28C4;
	--focus-outline-offset: 0.125rem;

	/* ============================================
	   COMPONENT TOKENS - Navigation (from Figma node 25295-24480)
	   ============================================ */

	/* Navigation Item Sizing */
	--elcogen-nav-item-padding-x: 1rem; /* 16px */
	--elcogen-nav-item-padding-y: 0.5rem; /* 8px */
	--elcogen-nav-item-inner-spacing: 0.5rem; /* 8px */
	--elcogen-nav-item-corner-radius: 22.5rem; /* 360px - pill shape */
	--elcogen-nav-item-border-width: 2px;

	/* Navigation Item - Default State */
	--elcogen-nav-item-bg-default: transparent;
	--elcogen-nav-item-border-default: transparent;
	--elcogen-nav-item-text-default: #131317;

	/* Navigation Item - Hover State */
	--elcogen-nav-item-bg-hover: #0c28c4;
	--elcogen-nav-item-border-hover: #0c28c4;
	--elcogen-nav-item-text-hover: #ffffff;

	/* Navigation Item - Active State */
	--elcogen-nav-item-bg-active: #0c28c4;
	--elcogen-nav-item-border-active: #0c28c4;
	--elcogen-nav-item-text-active: #ffffff;

	/* Navigation Item - Selected State */
	--elcogen-nav-item-bg-selected: #e6f9ff;
	--elcogen-nav-item-border-selected: #30323b;
	--elcogen-nav-item-text-selected: #131317;

	/* Navigation Item - Focus State */
	--elcogen-nav-item-bg-focus: transparent;
	--elcogen-nav-item-border-focus: #30323b;
	--elcogen-nav-item-text-focus: #131317;

	/* Navigation Submenu Panel */
	--elcogen-nav-submenu-bg-level2: #e6f9ff;
	--elcogen-nav-submenu-corner-radius-panel: 1rem; /* 16px */
	--elcogen-nav-submenu-padding-panel: 2rem; /* 32px */

	/* Navigation Submenu Items */
	--elcogen-nav-submenu-item-inner-spacing: 0.5rem; /* 8px */
	--elcogen-nav-submenu-item-padding-y: 0.75rem; /* 12px */
	--elcogen-nav-submenu-item-padding-x: 1.5rem; /* 24px */
	--elcogen-nav-submenu-item-corner-radius: 22.5rem; /* 360px - pill shape */
	--elcogen-nav-submenu-item-bg-default: transparent;
	--elcogen-nav-submenu-item-bg-hover: rgba(0, 0, 0, 0.05);
	--elcogen-nav-submenu-item-bg-selected: rgba(12, 40, 196, 0.1);
	--elcogen-nav-submenu-item-bg-selected-hover: rgba(12, 40, 196, 0.15);
	--elcogen-nav-submenu-item-text-default: #131317;
	--elcogen-nav-submenu-item-text-selected: #0c28c4;
	--elcogen-nav-submenu-item-border-default: #f2f1f2;

	/* Focus Ring (WCAG Accessibility) */
	--elcogen-focus-ring-offset-x: 0;
	--elcogen-focus-ring-offset-y: 0;
	--elcogen-focus-ring-blur: 0;
	--elcogen-focus-ring-inner-spread: 1px;
	--elcogen-focus-ring-outer-spread: 3px;
	--elcogen-focus-ring-inner-color: #ffffff;
	--elcogen-focus-ring-outer-color: #0092c1;

	/* ============================================
	   SEMANTIC ALIASES - Elcogen Prefixed
	   For backward compatibility with theme.css and other files
	   ============================================ */

	/* Typography - Font Families */
	--elcogen-font-body: var(--font-family-body);
	--elcogen-font-heading: var(--font-family-headings);

	/* Typography - Font Sizes */
	--elcogen-font-size-hero: var(--font-size-display);
	--elcogen-font-size-h1: var(--font-size-h1);
	--elcogen-font-size-h2: var(--font-size-h2);
	--elcogen-font-size-h3: var(--font-size-h3);
	--elcogen-font-size-h4: var(--font-size-h4);
	--elcogen-font-size-h5: var(--font-size-h5);
	--elcogen-font-size-h6: 1.125rem; /* 18px - not in Figma tokens */
	--elcogen-font-size-display-l: var(--font-size-h2);
	--elcogen-font-size-display-m: var(--font-size-h4);
	--elcogen-font-size-body-xlarge: var(--font-size-body-xlarge);
	--elcogen-font-size-body-lg: var(--font-size-body-large);
	--elcogen-font-size-body-md: var(--font-size-body-medium);
	--elcogen-font-size-body-sm: var(--font-size-body-base);
	--elcogen-font-size-body-xs: var(--font-size-body-small);
	--elcogen-font-size-accordion-lg: var(--font-size-body-xlarge);

	/* Typography - Line Heights */
	--elcogen-line-height-hero: var(--line-height-display);
	--elcogen-line-height-h1: var(--line-height-h1);
	--elcogen-line-height-h2: var(--line-height-h2);
	--elcogen-line-height-h3: var(--line-height-h3);
	--elcogen-line-height-h4: var(--line-height-h4);
	--elcogen-line-height-h5: var(--line-height-h5);
	--elcogen-line-height-h6: 1.75rem; /* 28px - not in Figma tokens */
	--elcogen-line-height-display-l: var(--line-height-h2);
	--elcogen-line-height-display-m: var(--line-height-h4);
	--elcogen-line-height-body-lg: var(--line-height-body-large);
	--elcogen-line-height-body-md: var(--line-height-body-medium);
	--elcogen-line-height-body-sm: var(--line-height-body-base);
	--elcogen-line-height-body-xs: var(--line-height-body-small);
	--elcogen-line-height-accordion-lg: var(--line-height-body-xlarge);

	/* Typography - Font Weights */
	--elcogen-weight-light: var(--font-weight-light);
	--elcogen-weight-regular: var(--font-weight-regular);
	--elcogen-weight-semibold: var(--font-weight-semibold);
	--elcogen-weight-bold: var(--font-weight-bold);

	/* Colors - Text */
	--elcogen-text-primary: var(--color-text-primary);
	--elcogen-text-secondary: var(--color-text-secondary);
	--elcogen-text-tertiary: var(--color-neutral-neutral-500);

	/* Colors - Brand Primary */
	--elcogen-brand-primary: var(--color-brand-primary);

	/* Colors - Neutrals */
	--elcogen-neutral-100: var(--color-neutral-neutral-100);
	--elcogen-neutral-200: var(--color-neutral-neutral-200);
	--elcogen-neutral-300: var(--color-neutral-neutral-300);
	--elcogen-neutral-400: var(--color-neutral-neutral-400);
	--elcogen-neutral-500: var(--color-neutral-neutral-500);
	--elcogen-neutral-600: var(--color-neutral-neutral-600);
	--elcogen-neutral-700: var(--color-neutral-neutral-700);
	--elcogen-neutral-800: var(--color-neutral-neutral-800);
	--elcogen-neutral-900: var(--color-neutral-neutral-900);
	--elcogen-neutral-1000: var(--color-neutral-neutral-1000);

	/* Colors - Cobalt Blue */
	--elcogen-cobalt-blue-100: var(--color-cobalt-blue-cobalt-blue-100);
	--elcogen-cobalt-blue-200: var(--color-cobalt-blue-cobalt-blue-200);
	--elcogen-cobalt-blue-400: var(--color-cobalt-blue-cobalt-blue-400);
	--elcogen-cobalt-blue-500: var(--color-cobalt-blue-cobalt-blue-500);
	--elcogen-cobalt-blue-600: var(--color-cobalt-blue-cobalt-blue-600);
	--elcogen-cobalt-blue-800: var(--color-cobalt-blue-cobalt-blue-800);

	/* Colors - Light Blue */
	--elcogen-light-blue-100: var(--color-light-blue-light-blue-100);
	--elcogen-light-blue-200: var(--color-light-blue-light-blue-200);
	--elcogen-light-blue-400: var(--color-light-blue-light-blue-400);
	--elcogen-light-blue-500: var(--color-light-blue-light-blue-500);
	--elcogen-light-blue-600: var(--color-light-blue-light-blue-600);
	--elcogen-light-blue-800: var(--color-light-blue-light-blue-800);

	/* Colors - Green */
	--elcogen-green-100: var(--color-green-green-100);
	--elcogen-green-200: var(--color-green-green-200);
	--elcogen-green-400: var(--color-green-green-400);
	--elcogen-green-600: var(--color-green-green-600);
	--elcogen-green-800: var(--color-green-green-800);

	/* Colors - Yellow */
	--elcogen-yellow-100: var(--color-yellow-yellow-100);
	--elcogen-yellow-200: var(--color-yellow-yellow-200);
	--elcogen-yellow-400: var(--color-yellow-yellow-400);
	--elcogen-yellow-600: var(--color-yellow-yellow-600);

	/* Spacing */
	--elcogen-space-0: 0;
	--elcogen-space-8: var(--spacing-baseline-08);
	--elcogen-space-16: var(--spacing-baseline-16);
	--elcogen-space-20: var(--spacing-baseline-20);
	--elcogen-space-24: var(--spacing-baseline-24);
	--elcogen-space-32: var(--spacing-baseline-32);
	--elcogen-space-48: var(--spacing-baseline-48);
	--elcogen-space-64: var(--spacing-baseline-64);
	--elcogen-space-80: var(--spacing-baseline-80);
	--elcogen-space-96: var(--spacing-baseline-96);

	/* Borders - Radius */
	--elcogen-radius-02: var(--border-radius-02);
	--elcogen-radius-04: var(--border-radius-04);
	--elcogen-radius-05: var(--border-radius-05);
	--elcogen-radius-06: var(--border-radius-06);

	/* Layout */
	--elcogen-content-max-width: var(--container-default);
	--elcogen-content-wrapper-width: var(--container-narrow);

	/* Links */
	--elcogen-link-default: var(--color-cobalt-blue-cobalt-blue-600);
	--elcogen-link-hover: var(--color-cobalt-blue-cobalt-blue-500);

	/* Buttons */
	--elcogen-button-radius: var(--border-radius-05);
	--elcogen-button-primary-bg: var(--color-cobalt-blue-cobalt-blue-400);
	--elcogen-button-primary-text: var(--color-neutral-neutral-100);
	--elcogen-button-primary-hover-bg: var(--color-cobalt-blue-cobalt-blue-500);
	--elcogen-button-padding-sm: var(--spacing-baseline-08) var(--spacing-baseline-16);
	--elcogen-button-padding-md: var(--spacing-baseline-06) var(--spacing-baseline-20);
	--elcogen-button-padding-lg: var(--spacing-baseline-24) var(--spacing-baseline-48);
	--elcogen-button-font-size-sm: var(--font-size-body-base);
	--elcogen-button-font-size-md: var(--font-size-body-medium);
	--elcogen-button-font-size-lg: var(--font-size-body-large);

	/* Forms/Inputs */
	--elcogen-input-bg: var(--color-neutral-neutral-100);
	--elcogen-input-border: 1px solid var(--color-neutral-neutral-300);
	--elcogen-input-border-focus: 2px solid var(--color-cobalt-blue-cobalt-blue-600);
	--elcogen-input-text: var(--color-text-primary);
	--elcogen-input-placeholder: var(--color-neutral-neutral-500);
	--elcogen-input-radius: var(--border-radius-04);
	--elcogen-input-padding: var(--spacing-baseline-16) var(--spacing-baseline-24);

	/* Accordions */
	--elcogen-accordion-border: 1px solid var(--color-neutral-neutral-300);
	--elcogen-accordion-bg: var(--color-neutral-neutral-100);
	--elcogen-accordion-hover-bg: var(--color-neutral-neutral-200);
	--elcogen-accordion-padding: var(--spacing-baseline-24);

	/* Header/Footer */
	--elcogen-header-bg: var(--color-neutral-neutral-100);
	--elcogen-footer-bg: var(--color-neutral-neutral-1000);
	--elcogen-footer-text: var(--color-neutral-neutral-100);

	/* Shadows */
	--elcogen-shadow-01: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   UTILITY CLASSES - Text Styles
   ============================================ */

.text-headings-h1-for-subpage-hero-heading {
	font-family: var(--text-headings-h1-for-subpage-hero-heading-family);
	font-size: var(--text-headings-h1-for-subpage-hero-heading-size);
	font-weight: var(--text-headings-h1-for-subpage-hero-heading-weight);
	line-height: var(--text-headings-h1-for-subpage-hero-heading-line-height);
	letter-spacing: var(--text-headings-h1-for-subpage-hero-heading-letter-spacing);
}

.text-headings-h1 {
	font-family: var(--text-headings-h1-family);
	font-size: var(--text-headings-h1-size);
	font-weight: var(--text-headings-h1-weight);
	line-height: var(--text-headings-h1-line-height);
	letter-spacing: var(--text-headings-h1-letter-spacing);
}

.text-headings-h2 {
	font-family: var(--text-headings-h2-family);
	font-size: var(--text-headings-h2-size);
	font-weight: var(--text-headings-h2-weight);
	line-height: var(--text-headings-h2-line-height);
	letter-spacing: var(--text-headings-h2-letter-spacing);
}

.text-headings-display-l {
	font-family: var(--text-headings-display-l-family);
	font-size: var(--text-headings-display-l-size);
}

.text-headings-h3 {
	font-family: var(--text-headings-h3-family);
	font-size: var(--text-headings-h3-size);
	font-weight: var(--text-headings-h3-weight);
	line-height: var(--text-headings-h3-line-height);
	letter-spacing: var(--text-headings-h3-letter-spacing);
}

.text-headings-h4 {
	font-family: var(--text-headings-h4-family);
	font-size: var(--text-headings-h4-size);
	font-weight: var(--text-headings-h4-weight);
	line-height: var(--text-headings-h4-line-height);
	font-letter-spacing: var(--text-headings-h4-letter-spacing);
}

.text-headings-display-m {
	font-family: var(--text-headings-display-m-family);
	font-size: var(--text-headings-display-m-size);
}

.text-headings-h5 {
	font-family: var(--text-headings-h5-family);
	font-size: var(--text-headings-h5-size);
	font-weight: var(--text-headings-h5-weight);
	line-height: var(--text-headings-h5-line-height);
	letter-spacing: var(--text-headings-h5-letter-spacing);
}

.text-headings-h6 {
	font-family: var(--text-headings-h6-family);
	font-size: var(--text-headings-h6-size);
	font-weight: var(--text-headings-h6-weight);
	line-height: var(--text-headings-h6-line-height);
	letter-spacing: var(--text-headings-h6-letter-spacing);
}

.text-documentation-page-header {
	font-family: var(--text-documentation-page-header-family);
	font-size: var(--text-documentation-page-header-size);
	font-weight: var(--text-documentation-page-header-weight);
	line-height: var(--text-documentation-page-header-line-height);
	letter-spacing: var(--text-documentation-page-header-letter-spacing);
}

.text-documentation-colors-list {
	font-family: var(--text-documentation-colors-list-family);
	font-size: var(--text-documentation-colors-list-size);
	font-weight: var(--text-documentation-colors-list-weight);
	line-height: var(--text-documentation-colors-list-line-height);
	letter-spacing: var(--text-documentation-colors-list-letter-spacing);
}

.text-accordion-title {
	font-family: var(--text-accordion-title-family);
	font-size: var(--text-accordion-title-size);
	font-weight: var(--text-accordion-title-weight);
	line-height: var(--text-accordion-title-line-height);
	letter-spacing: var(--text-accordion-title-letter-spacing);
}

.text-body-large {
	font-family: var(--text-body-large-family);
	font-size: var(--text-body-large-size);
	font-weight: var(--text-body-large-weight);
	line-height: var(--text-body-large-line-height);
	letter-spacing: var(--text-body-large-letter-spacing);
}

.text-body-large-bold {
	font-family: var(--text-body-large-bold-family);
	font-size: var(--text-body-large-bold-size);
	font-weight: var(--text-body-large-bold-weight);
	line-height: var(--text-body-large-bold-line-height);
	letter-spacing: var(--text-body-large-bold-letter-spacing);
}

.text-body-medium {
	font-family: var(--text-body-medium-family);
	font-size: var(--text-body-medium-size);
	font-weight: var(--text-body-medium-weight);
	line-height: var(--text-body-medium-line-height);
	letter-spacing: var(--text-body-medium-letter-spacing);
}

.text-body-medium-bold {
	font-family: var(--text-body-medium-bold-family);
	font-size: var(--text-body-medium-bold-size);
	font-weight: var(--text-body-medium-bold-weight);
	line-height: var(--text-body-medium-bold-line-height);
	letter-spacing: var(--text-body-medium-bold-letter-spacing);
}

.text-body-small {
	font-family: var(--text-body-small-family);
	font-size: var(--text-body-small-size);
	font-weight: var(--text-body-small-weight);
	line-height: var(--text-body-small-line-height);
	letter-spacing: var(--text-body-small-letter-spacing);
}

.text-body-small-bold {
	font-family: var(--text-body-small-bold-family);
	font-size: var(--text-body-small-bold-size);
	font-weight: var(--text-body-small-bold-weight);
	line-height: var(--text-body-small-bold-line-height);
	letter-spacing: var(--text-body-small-bold-letter-spacing);
}

.text-body-extra-small {
	font-family: var(--text-body-extra-small-family);
	font-size: var(--text-body-extra-small-size);
	font-weight: var(--text-body-extra-small-weight);
	line-height: var(--text-body-extra-small-line-height);
	letter-spacing: var(--text-body-extra-small-letter-spacing);
}

.text-links-large {
	font-family: var(--text-links-large-family);
	font-size: var(--text-links-large-size);
	font-weight: var(--text-links-large-weight);
	line-height: var(--text-links-large-line-height);
	letter-spacing: var(--text-links-large-letter-spacing);
}

.text-links-medium {
	font-family: var(--text-links-medium-family);
	font-size: var(--text-links-medium-size);
	font-weight: var(--text-links-medium-weight);
	line-height: var(--text-links-medium-line-height);
	letter-spacing: var(--text-links-medium-letter-spacing);
}

.text-links-small {
	font-family: var(--text-links-small-family);
	font-size: var(--text-links-small-size);
	font-weight: var(--text-links-small-weight);
	line-height: var(--text-links-small-line-height);
	letter-spacing: var(--text-links-small-letter-spacing);
}