/* Webority Design System - CSS Variables */
:root {
  /* Primary Colors */
  --primary: #6200EE;
  --primary-50: #B180F7;
  --primary-30: #D0B3FA;
  --primary-20: #E0CCFC;
  --primary-15: #E8D9FD;
  --primary-10: #F0E6FE;
  --primary-5: #F7F2FE;
  --button-pressed: #5800D6;
  --button-hover: #3A0091;
  
  /* Text & Heading Colors */
  --heading: #071437;
  --text-1: #252F4A;
  --text-2: #4B5675;
  --text-3: #78829D;
  --text-4: #99A1B7;
  --text-5: #C4CADA;
  --white: #FFFFFF;
  --dark-border: #EBEDF3;
  --light-border: #F4F6F8;
  --dark-bg: #F5F6FA;
  --light-bg: #F9FBFC;
  
  /* Info Colors */
  --info-active: #056EE9;
  --info-100: #1884FF;
  --info-50: #8DC2FF;
  --info-30: #BBDBFF;
  --info-20: #D1E6FF;
  --info-10: #E9F3FF;
  --info-5: #F3F9FF;
  
  /* Success Colors */
  --success-active: #04B440;
  --success-100: #17C653;
  --success-50: #8BE3A9;
  --success-30: #BAEECC;
  --success-20: #D1F4DD;
  --success-10: #E8FAEE;
  --success-5: #F3FCF6;
  
  /* Warning Colors */
  --warning-active: #DFA000;
  --warning-100: #F6B100;
  --warning-50: #FBD880;
  --warning-30: #FDE8B3;
  --warning-20: #FDEFCC;
  --warning-10: #FFF8E6;
  --warning-5: #FFFBF2;
  
  /* Error Colors */
  --error-active: #E82646;
  --error-100: #F8285A;
  --error-50: #FC94AD;
  --error-30: #FDBFCE;
  --error-20: #FED4DE;
  --error-10: #FFEAEF;
  --error-5: #FEF4F6;
  
  /* Font Families */
  --Josefin-semiBold: 'JosefinSans-SemiBold', 'Georgia', serif;
  --Josefin-bold: 'JosefinSans-Bold', 'Georgia', serif;
  --Josefin-medium: 'JosefinSans-Medium', 'Georgia', serif;
  --Times-Regular: 'TimesNewerRoman-Regular', serif;
  --Times-italic: 'TimesNewerRoman-Italic', serif;
  --Josefin-Regular: 'JosefinSans-Regular', 'Georgia', serif;
  --Josefin-light: 'JosefinSans-Light', 'Georgia', serif;
  
  /* ===== HYBRID RESPONSIVE FONT SIZES (12px - 120px) ===== */
  /* Auto-scaling fonts with clamp() - Max = variable name in rem */
  --fs-12: clamp(0.625rem, 0.54rem + 0.36vw, 0.75rem);
  /* 10px - 12px */
  --fs-14: clamp(0.75rem, 0.66rem + 0.36vw, 0.875rem);
  /* 12px - 14px */
  --fs-16: clamp(0.875rem, 0.79rem + 0.36vw, 1rem);
  /* 14px - 16px */
  --fs-18: clamp(1rem, 0.91rem + 0.36vw, 1.125rem);
  /* 16px - 18px */
  --fs-20: clamp(1.125rem, 1.04rem + 0.36vw, 1.25rem);
  /* 18px - 20px */
  --fs-22: clamp(1.25rem, 1.16rem + 0.36vw, 1.375rem);
  /* 20px - 22px */
  --fs-24: clamp(1.375rem, 1.29rem + 0.36vw, 1.5rem);
  /* 22px - 24px */
  --fs-28: clamp(1.5rem, 1.32rem + 0.71vw, 1.75rem);
  /* 24px - 28px */
  --fs-32: clamp(1.75rem, 1.57rem + 0.71vw, 2rem);
  /* 28px - 32px */
  --fs-34: clamp(1.875rem, 1.7rem + 0.71vw, 2.125rem);
  /* 30px - 34px */
  --fs-36: clamp(2rem, 1.82rem + 0.71vw, 2.25rem);
  /* 32px - 36px */
  --fs-42: clamp(2.25rem, 1.98rem + 1.07vw, 2.625rem);
  /* 36px - 42px */
  --fs-48: clamp(2.625rem, 2.36rem + 1.07vw, 3rem);
  /* 42px - 48px */
  --fs-52: clamp(2.875rem, 2.59rem + 1.07vw, 3.25rem);
  /* 46px - 52px */
  --fs-56: clamp(3.125rem, 2.84rem + 1.07vw, 3.5rem);
  /* 50px - 56px */
  --fs-62: clamp(3.5rem, 3.21rem + 1.07vw, 3.875rem);
  /* 56px - 62px */
  --fs-72: clamp(4rem, 3.64rem + 1.43vw, 4.5rem);
  /* 64px - 72px */
  --fs-80: clamp(4.5rem, 4.14rem + 1.43vw, 5rem);
  /* 72px - 80px */
  --fs-90: clamp(5rem, 4.57rem + 1.79vw, 5.625rem);
  /* 80px - 90px */
  --fs-110: clamp(6.25rem, 5.71rem + 2.14vw, 6.875rem);
  /* 100px - 110px */
  --fs-120: clamp(6.875rem, 6.34rem + 2.14vw, 7.5rem);
  /* 110px - 120px */
  
  /* Font Weights - Updated for available fonts */
  --fw-100: 100;
  /* Josefin Sans Thin */
  --fw-200: 200;
  /* Josefin Sans ExtraLight (newly added) */
  --fw-300: 300;
  /* Josefin Sans Light */
  --fw-400: 400;
  /* Both fonts Regular/Roman */
  --fw-600: 600;
  /* Both fonts Semibold */
  --fw-700: 700;
  /* Both fonts Bold */
  --fw-800: 800;
  /* ExtraBold */
  
  /* Line Heights */
  --lh-small: 1.25;
  --lh-medium: 1.375;
  --lh-base: 1.5;
  --lh-large: 1.625;
  --lh-xlarge: 2;
  --lh-normal: normal;
  
  /* ===== HYBRID RESPONSIVE SPACING SYSTEM ===== */
  /* Auto-scaling spacing with clamp() - Max = variable name in rem */
  --space-1: clamp(0.05rem, 0.05rem + 0.01vw, 0.0625rem);
  /* 0.8px - 1px */
  --space-2: clamp(0.1rem, 0.09rem + 0.02vw, 0.125rem);
  /* 1.6px - 2px */
  --space-3: clamp(0.15rem, 0.14rem + 0.03vw, 0.1875rem);
  /* 2.4px - 3px */
  --space-4: clamp(0.2rem, 0.19rem + 0.04vw, 0.25rem);
  /* 3.2px - 4px */
  --space-5: clamp(0.25rem, 0.23rem + 0.05vw, 0.3125rem);
  /* 4px - 5px */
  --space-6: clamp(0.3rem, 0.28rem + 0.07vw, 0.375rem);
  /* 4.8px - 6px */
  --space-8: clamp(0.4rem, 0.37rem + 0.09vw, 0.5rem);
  /* 6.4px - 8px */
  --space-10: clamp(0.5rem, 0.46rem + 0.11vw, 0.625rem);
  /* 8px - 10px */
  --space-12: clamp(0.6rem, 0.56rem + 0.13vw, 0.75rem);
  /* 9.6px - 12px */
  --space-16: clamp(0.8rem, 0.74rem + 0.18vw, 1rem);
  /* 12.8px - 16px */
  --space-20: clamp(1rem, 0.93rem + 0.22vw, 1.25rem);
  /* 16px - 20px */
  --space-24: clamp(1.2rem, 1.11rem + 0.27vw, 1.5rem);
  /* 19.2px - 24px */
  --space-30: clamp(1.5rem, 1.39rem + 0.33vw, 1.875rem);
  /* 24px - 30px */
  --space-32: clamp(1.6rem, 1.48rem + 0.36vw, 2rem);
  /* 25.6px - 32px */
  --space-40: clamp(2rem, 1.86rem + 0.45vw, 2.5rem);
  /* 32px - 40px */
  --space-48: clamp(2.4rem, 2.23rem + 0.54vw, 3rem);
  /* 38.4px - 48px */
  --space-50: clamp(2.5rem, 2.32rem + 0.56vw, 3.125rem);
  /* 40px - 50px */
  --space-64: clamp(3.2rem, 2.97rem + 0.71vw, 4rem);
  /* 51.2px - 64px */
  
  /* Legacy spacing aliases */
  --space-0: 0;
}


/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}