/* CSS Variables extracted from registration flow files */
:root {
  /* Brand Colors */
  --primary-blue: #5598E9;
  --primary-blue-light: #5598e947;
  --secondary-blue: #ACC6DD;
  --accent-green: #BFDAA4;
  --accent-peach: #FED1BE;
  --dark-navy: #0D325E;
  --black: #000000;
  --white: #ffffff;
  --form-bg: #F2F2F2;
  --gray-light: #D3D3D3;
  
  /* Typography */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Plus Jakarta Sans', sans-serif;
  
  /* Font Sizes */
  --font-size-hero: 48px;
  --font-size-title: 40px;
  --font-size-subtitle: 36px;
  --font-size-section: 32px;
  --font-size-large: 23px;
  --font-size-base: 20px;
  --font-size-medium: 18px;
  --font-size-small: 16px;
  
  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  
  /* Line Heights */
  --line-height-tight: 1.0;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Spacing System */
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 25px;
  --spacing-xl: 30px;
  --spacing-2xl: 50px;
  
  /* Component Dimensions */
  --form-control-height: 80px;
  --form-control-height-sm: 85px;
  --section-min-height: 458px;
  --section-min-height-sm: 320px;
  
  /* Border Radius */
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  
  /* Shadows */
  --box-shadow-card: 0px 20px 50px 0px rgba(0, 0, 0, 0.12);
  --box-shadow-focus: 0 0 0 0.05rem rgba(8, 8, 8, 0.25);
  
  /* Z-index Scale */
  --z-index-overlay: 9;
  --z-index-modal: 999;
  --z-index-tooltip: 9999;
  
  /* Gradients */
  --gradient-hero: linear-gradient(to bottom, var(--primary-blue-light) 50%, var(--white) 100%);
  --gradient-hero-dark: linear-gradient(287.63deg, rgba(0, 0, 0, 0.1) 55.15%, #0d325efa 90.19%);
  
  /* Breakpoints */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
}