/* Webority Design System - CSS Variables */
:root {
  /* Primary Colors - Orange Gradient */
  --primary: #FF4400;
  --primary-50: #FFA17F;
  --primary-30: #FFC7B3;
  --primary-20: #FFDACC;
  --primary-10: #FFEDE6;
  
  /* Secondary Colors - Dark Gradient */
  --secondary: #171A21;
  --secondary-80: #141414;
  --secondary-50: #8A8C8F;
  --secondary-30: #A8ABBD;
  --secondary-20: #D1D1D3;
  --secondary-10: #E8E8E9;
  --black: #000000;
  
  /* Informative Colors - Blue Gradient */
  --informative: #1B84FF;
  --informative-50: #8DC1FF;
  --informative-40: #A4CEFF;
  --informative-30: #BBD4FF;
  --informative-20: #D1E6FF;
  --informative-10: #E8F3FF;
  
  /* Success Colors - Green Gradient */
  --success: #17C653;
  --success-50: #8BE3A9;
  --success-40: #A2E8BA;
  --success-30: #B9ECCB;
  --success-20: #D1F4DD;
  --success-10: #E8F9EE;
  
  /* Alert Colors - Red Gradient */
  --alert: #EB2646;
  --alert-50: #F593A3;
  --alert-40: #F6A8B5;
  --alert-30: #F8BEC7;
  --alert-20: #FDD1D1;
  --alert-10: #FDE9EC;
  
  /* Warning Colors - Yellow Gradient */
  --warning: #FEB100;
  --warning-50: #FED880;
  --warning-40: #FEE099;
  --warning-30: #FEE8B3;
  --warning-20: #FEFCCC;
  --warning-10: #FEF7E5;
  
  /* Text Colors */
  --heading: #181C32;
  --text-1: #3F4254;
  --text-2: #84859A;
  --text-3: #B5B5C3;
  --text-4: #EBEDF3;
  --text-5: #FFFFFF;
  
  /* others Colors */
  --white-smoke: #F5F5F5;
  --snow: #FAFAFA;
  
  /* Background Colors */
  --bg-light: #F5F7F9;
  --white: #FFFFFF;
  --bg-dark: var(--secondary);
  --bg-black: var(--black); /* used */
  
  /* Outline Colors */
  --outline: #E8EDF3;
  
  /* Font Families */
  --font-heading: 'Josefin Sans', 'Georgia', serif;
  --font-body: 'Times LT Std', 'Times New Roman', serif;
  --font-decorative: 'Josefin Sans', 'Georgia', serif;
  
  /* ===== HYBRID RESPONSIVE FONT SIZES (12px - 120px) ===== */
  /* Auto-scaling fonts with clamp() - Primary system */
  --fs-12: clamp(0.75rem, 0.65rem + 0.5vw, 0.85rem);     /* 12px - 14px */
  --fs-14: clamp(0.875rem, 0.75rem + 0.625vw, 1rem);     /* 14px - 16px */
  --fs-16: clamp(1rem, 0.85rem + 0.75vw, 1.125rem);      /* 16px - 18px */
  --fs-18: clamp(1.125rem, 0.95rem + 0.875vw, 1.25rem);  /* 18px - 20px */
  --fs-20: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);      /* 20px - 22px */
  --fs-22: clamp(1.375rem, 1.15rem + 1.1vw, 1.61rem);     /* 22px - 24px */
  --fs-24: clamp(1.5rem, 1.25rem + 1.25vw, 1.75rem);     /* 24px - 28px */
  --fs-28: clamp(1.75rem, 1.5rem + 1.25vw, 2rem);        /* 28px - 32px */
  --fs-32: clamp(2rem, 1.65rem + 1.75vw, 2.375rem);      /* 32px - 38px */
  --fs-34: clamp(2rem, 2.125vw, 2.25rem);
  --fs-36: clamp(2.25rem, 1.85rem + 2vw, 2.75rem);       /* 36px - 44px */
  --fs-42: clamp(2.625rem, 2.125rem + 2.5vw, 3rem);   /* 42px - 52px */
  --fs-48: clamp(3rem, 2.4rem + 3vw, 3.75rem);           /* 48px - 60px */
  --fs-52: clamp(3.25rem, 2.55rem + 3.5vw, 4.125rem);    /* 52px - 66px */
  --fs-56: clamp(3.5rem, 2.75rem + 3.75vw, 4.5rem);      /* 56px - 72px */
  --fs-62: clamp(3.875rem, 3rem + 4.375vw, 5rem);        /* 62px - 80px */
  --fs-72: clamp(4.5rem, 3.5rem + 5vw, 5.75rem);         /* 72px - 92px */
  --fs-80: clamp(5rem, 3.9rem + 5.5vw, 6.375rem);        /* 80px - 102px */
  --fs-90: clamp(5.625rem, 4.375rem + 6.25vw, 7.25rem);  /* 90px - 116px */
  --fs-110: clamp(6.875rem, 5.375rem + 7.5vw, 8.75rem);  /* 110px - 140px */
  --fs-120: clamp(7.5rem, 5.9rem + 8vw, 9.5rem);         /* 120px - 152px */
  
  /* Legacy aliases for backward compatibility */
  --fs-xs: var(--fs-12);
  --fs-sm: var(--fs-14);
  --fs-base: var(--fs-16);
  --fs-lg: var(--fs-18);
  --fs-xl: var(--fs-20);
  --fs-2xl: var(--fs-24);
  --fs-3xl: var(--fs-32);
  --fs-4xl: var(--fs-42);
  --fs-5xl: var(--fs-48);
  --fs-6xl: var(--fs-62);
  --fs-7xl: var(--fs-72);
  
  /* Fixed sizes for precise control when needed */
  --fs-12-mobile: 0.75rem;   /* 12px */
  --fs-14-mobile: 0.875rem;  /* 14px */
  --fs-16-mobile: 1rem;      /* 16px */
  --fs-18-mobile: 1.125rem;  /* 18px */
  --fs-20-mobile: 1.25rem;   /* 20px */
  --fs-24-mobile: 1.5rem;    /* 24px */
  --fs-28-mobile: 1.75rem;   /* 28px */
  --fs-32-mobile: 2rem;      /* 32px */
  --fs-36-mobile: 2.25rem;   /* 36px */
  --fs-42-mobile: 2.625rem;  /* 42px */
  --fs-48-mobile: 3rem;      /* 48px */
  --fs-52-mobile: 3.25rem;   /* 52px */
  --fs-62-mobile: 3.875rem;  /* 62px */
  --fs-72-mobile: 4.5rem;    /* 72px */
  --fs-80-mobile: 5rem;      /* 80px */
  
  --fs-12-tablet: 0.75rem;   /* 12px */
  --fs-14-tablet: 0.875rem;  /* 14px */
  --fs-16-tablet: 1rem;      /* 16px */
  --fs-18-tablet: 1.125rem;  /* 18px */
  --fs-20-tablet: 1.25rem;   /* 20px */
  --fs-24-tablet: 1.5rem;    /* 24px */
  --fs-28-tablet: 1.75rem;   /* 28px */
  --fs-32-tablet: 2rem;      /* 32px */
  --fs-36-tablet: 2.25rem;   /* 36px */
  --fs-42-tablet: 2.625rem;  /* 42px */
  --fs-48-tablet: 3rem;      /* 48px */
  --fs-52-tablet: 3.25rem;   /* 52px */
  --fs-62-tablet: 3.875rem;  /* 62px */
  --fs-72-tablet: 4.5rem;    /* 72px */
  --fs-80-tablet: 5rem;      /* 80px */
  --fs-90-tablet: 5.625rem;  /* 90px */
  
  --fs-12-desktop: 0.75rem;   /* 12px */
  --fs-14-desktop: 0.875rem;  /* 14px */
  --fs-16-desktop: 1rem;      /* 16px */
  --fs-18-desktop: 1.125rem;  /* 18px */
  --fs-20-desktop: 1.25rem;   /* 20px */
  --fs-24-desktop: 1.5rem;    /* 24px */
  --fs-28-desktop: 1.75rem;   /* 28px */
  --fs-32-desktop: 2rem;      /* 32px */
  --fs-36-desktop: 2.25rem;   /* 36px */
  --fs-42-desktop: 2.625rem;  /* 42px */
  --fs-48-desktop: 3rem;      /* 48px */
  --fs-52-desktop: 3.25rem;   /* 52px */
  --fs-62-desktop: 3.875rem;  /* 62px */
  --fs-72-desktop: 4.5rem;    /* 72px */
  --fs-80-desktop: 5rem;      /* 80px */
  --fs-90-desktop: 5.625rem;  /* 90px */
  --fs-110-desktop: 6.875rem; /* 110px */
  --fs-120-desktop: 7.5rem;   /* 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;      /* Times LT Std ExtraBold */
  
  /* Line Heights */
  --lh-small: 1.25;
  --lh-medium: 1.375;
  --lh-base: 1.5;
  --lh-large: 1.625;
  --lh-xlarge: 2;
  --lh-none: none;
  --lh-normal: normal;
  
  /* ===== HYBRID RESPONSIVE SPACING SYSTEM ===== */
  /* Auto-scaling spacing with clamp() - Primary system */
  --space-1: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);   /* 2px - 4px */
  --space-2: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);     /* 4px - 8px */
  --space-3: clamp(0.375rem, 0.3rem + 0.375vw, 0.75rem);  /* 6px - 12px */
  --space-4: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);         /* 8px - 16px */
  --space-5: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);  /* 10px - 20px */
  --space-6: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);     /* 12px - 24px */
  --space-8: clamp(1rem, 0.8rem + 1vw, 2rem);             /* 16px - 32px */
  --space-10: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);      /* 20px - 40px */
  --space-12: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);        /* 24px - 48px */
  --space-16: clamp(2rem, 1.6rem + 2vw, 4rem);            /* 32px - 64px */
  --space-20: clamp(2.5rem, 2rem + 2.5vw, 5rem);          /* 40px - 80px */
  --space-24: clamp(3rem, 2.4rem + 3vw, 6rem);            /* 48px - 96px */
  --space-32: clamp(4rem, 3.2rem + 4vw, 8rem);            /* 64px - 128px */
  --space-40: clamp(5rem, 4rem + 5vw, 10rem);             /* 80px - 160px */
  --space-48: clamp(6rem, 4.8rem + 6vw, 12rem);           /* 96px - 192px */
  --space-64: clamp(8rem, 6.4rem + 8vw, 16rem);           /* 128px - 256px */
  
  /* Fixed spacing for precise control */
  --space-1-mobile: 0.125rem;  /* 2px */
  --space-2-mobile: 0.25rem;   /* 4px */
  --space-3-mobile: 0.375rem;  /* 6px */
  --space-4-mobile: 0.5rem;    /* 8px */
  --space-5-mobile: 0.625rem;  /* 10px */
  --space-6-mobile: 0.75rem;   /* 12px */
  --space-8-mobile: 1rem;      /* 16px */
  --space-10-mobile: 1.25rem;  /* 20px */
  --space-12-mobile: 1.5rem;   /* 24px */
  --space-16-mobile: 2rem;     /* 32px */
  --space-20-mobile: 2.5rem;   /* 40px */
  --space-24-mobile: 3rem;     /* 48px */
  
  --space-1-tablet: 0.1875rem; /* 3px */
  --space-2-tablet: 0.375rem;  /* 6px */
  --space-3-tablet: 0.5625rem; /* 9px */
  --space-4-tablet: 0.75rem;   /* 12px */
  --space-5-tablet: 0.9375rem; /* 15px */
  --space-6-tablet: 1.125rem;  /* 18px */
  --space-8-tablet: 1.5rem;    /* 24px */
  --space-10-tablet: 1.875rem; /* 30px */
  --space-12-tablet: 2.25rem;  /* 36px */
  --space-16-tablet: 3rem;     /* 48px */
  --space-20-tablet: 3.75rem;  /* 60px */
  --space-24-tablet: 4.5rem;   /* 72px */
  --space-32-tablet: 6rem;     /* 96px */
  
  --space-1-desktop: 0.25rem;  /* 4px */
  --space-2-desktop: 0.5rem;   /* 8px */
  --space-3-desktop: 0.75rem;  /* 12px */
  --space-4-desktop: 1rem;     /* 16px */
  --space-5-desktop: 1.25rem;  /* 20px */
  --space-6-desktop: 1.5rem;   /* 24px */
  --space-8-desktop: 2rem;     /* 32px */
  --space-10-desktop: 2.5rem;  /* 40px */
  --space-12-desktop: 3rem;    /* 48px */
  --space-16-desktop: 4rem;    /* 64px */
  --space-20-desktop: 5rem;    /* 80px */
  --space-24-desktop: 6rem;    /* 96px */
  --space-32-desktop: 8rem;    /* 128px */
  --space-40-desktop: 10rem;   /* 160px */
  --space-48-desktop: 12rem;   /* 192px */
  --space-64-desktop: 16rem;   /* 256px */
  
  /* Legacy spacing aliases */
  --space-0: 0;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== RESPONSIVE BREAKPOINTS & DEVICE-SPECIFIC OVERRIDES ===== */

/* Mobile devices (up to 767px) */
@media (max-width: 767px) {
  :root {
    /* Hero and large text adjustments for mobile */
    --hero-title: var(--fs-42-mobile);
    --hero-subtitle: var(--fs-18-mobile);
    --section-title: var(--fs-32-mobile);
    --section-subtitle: var(--fs-16-mobile);
    
    /* Mobile-specific spacing */
    --hero-padding: var(--space-16-mobile);
    --section-padding: var(--space-12-mobile);
    --card-padding: var(--space-6-mobile);
    --container-padding: var(--space-4-mobile);
    
    /* Mobile navigation adjustments */
    --nav-height: 3.5rem;
    --nav-font-size: var(--fs-16-mobile);
    
    /* Mobile button sizing */
    --btn-padding-y: var(--space-3-mobile);
    --btn-padding-x: var(--space-6-mobile);
    --btn-font-size: var(--fs-16-mobile);
  }
}

/* Tablet devices (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    /* Tablet-specific font sizes */
    --hero-title: var(--fs-62-tablet);
    --hero-subtitle: var(--fs-20-tablet);
    --section-title: var(--fs-42-tablet);
    --section-subtitle: var(--fs-18-tablet);
    
    /* Tablet spacing */
    --hero-padding: var(--space-20-tablet);
    --section-padding: var(--space-16-tablet);
    --card-padding: var(--space-8-tablet);
    --container-padding: var(--space-6-tablet);
    
    /* Tablet navigation */
    --nav-height: 4rem;
    --nav-font-size: var(--fs-18-tablet);
    
    /* Tablet buttons */
    --btn-padding-y: var(--space-4-tablet);
    --btn-padding-x: var(--space-8-tablet);
    --btn-font-size: var(--fs-18-tablet);
  }
}

/* Desktop devices (1024px and up) */
@media (min-width: 1024px) {
  :root {
    /* Desktop-specific font sizes */
    --hero-title: var(--fs-80-desktop);
    --hero-subtitle: var(--fs-24-desktop);
    --section-title: var(--fs-52-desktop);
    --section-subtitle: var(--fs-20-desktop);
    
    /* Desktop spacing */
    --hero-padding: var(--space-32-desktop);
    --section-padding: var(--space-24-desktop);
    --card-padding: var(--space-12-desktop);
    --container-padding: var(--space-8-desktop);
    
    /* Desktop navigation */
    --nav-height: 4.5rem;
    --nav-font-size: var(--fs-18-desktop);
    
    /* Desktop buttons */
    --btn-padding-y: var(--space-5-desktop);
    --btn-padding-x: var(--space-10-desktop);
    --btn-font-size: var(--fs-18-desktop);
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  :root {
    /* Large desktop adjustments */
    --hero-title: var(--fs-110-desktop);
    --hero-subtitle: var(--fs-28-desktop);
    --section-title: var(--fs-72-desktop);
    --section-subtitle: var(--fs-24-desktop);
    
    /* Increased spacing for large screens */
    --hero-padding: var(--space-48-desktop);
    --section-padding: var(--space-32-desktop);
    --container-padding: var(--space-12-desktop);
  }
}

/* Extra large desktop (1920px and up) */
@media (min-width: 1920px) {
  :root {
    /* Ultra-wide desktop adjustments */
    --hero-title: var(--fs-120-desktop);
    --hero-subtitle: var(--fs-32-desktop);
    --section-title: var(--fs-80-desktop);
    --section-subtitle: var(--fs-28-desktop);
    
    /* Maximum spacing for ultra-wide screens */
    --hero-padding: var(--space-64-desktop);
    --section-padding: var(--space-40-desktop);
    --container-padding: var(--space-16-desktop);
  }
}

/* Dark mode variables */
/* @media (prefers-color-scheme: dark) {
:root {
--bg-light: #0F1419;
--white: #1A202C;
--heading: #FFFFFF;
--text-1: #E2E8F0;
--text-2: #A0AEC0;
--text-3: #718096;
--outline: #2D3748;
}
} */

/* High contrast mode support */
/* @media (prefers-contrast: high) {
:root {
--primary: #CC3300;
--secondary: #000000;
--text-1: #000000;
--outline: #000000;
}
} */

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