/* 
 * SHERRY HIVE DIGITALS - CSS VARIABLES
 * Design System: Blue & White Premium Agency Theme
 */

:root {
  /* ===== COLOR PALETTE ===== */
  /* Brand Greens and Golds */
  --color-primary: #0E4236;           /* Main brand color */
  --color-primary-dark: #072921;      /* Darker brand tone for hover states */
  --color-primary-light: #E6F2EA;     /* Light brand background */
  
  /* Secondary/Accent */
  --color-secondary: #B98C35;         /* Gold accent for premium highlights */
  --color-accent: #E0B653;            /* Warm accent for CTA and details */
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-light-gray: #F3F7F3;        /* Soft neutral background */
  --color-medium-gray: #9EA49D;       /* Muted gray for borders and text */
  --color-dark-gray: #1A2521;         /* Dark text color for brand harmony */
  --color-text: #16231F;              /* Body text color */
  
  /* Semantic Colors */
  --color-success: #4CAF50;
  --color-error: #F44336;
  --color-warning: #FF9800;
  --color-info: #2196F3;
  
  /* ===== TYPOGRAPHY ===== */
  /* Font Family */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-secondary: 'Georgia', serif;  /* For accent headings if needed */
  
  /* Font Sizes (Mobile-first, scale up with media queries) */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;
  
  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-loose: 2;
  
  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.05em;
  
  /* ===== SPACING ===== */
  /* Base spacing unit: 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* Padding shortcuts */
  --pad-section: var(--space-8);      /* Vertical padding for sections (mobile) */
  --pad-container: var(--space-4);    /* Horizontal padding for containers (mobile) */
  
  /* ===== BORDERS & RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Border Colors & Widths */
  --border-color: #E0E0E0;
  --border-width: 1px;
  --border-width-2: 2px;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(0, 102, 204, 0.3);
  --shadow-glow-lg: 0 0 40px rgba(0, 102, 204, 0.2);
  
  /* ===== BACKDROP FILTERS ===== */
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-md: blur(8px);
  --backdrop-blur-lg: blur(16px);
  --backdrop-blur-xl: blur(24px);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== 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;
  --z-toast: 1080;
  
  /* ===== CONTAINER MAX WIDTHS ===== */
  --container-xs: 475px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max-width: 1200px;
  
  /* ===== TOUCH TARGETS ===== */
  --touch-target: 44px;
  
  /* ===== GRADIENTS ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-dark-gray) 0%, #1a1a1a 100%);
  --gradient-light: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(255, 255, 255, 0.9) 100%);
  
  /* ===== ANIMATIONS ===== */
  --animation-fade-in: fadeIn 0.6s ease-out;
  --animation-slide-up: slideUp 0.6s ease-out;
  --animation-slide-down: slideDown 0.6s ease-out;
  --animation-scale-in: scaleIn 0.5s ease-out;
  --animation-bounce-in: bounceIn 0.8s ease-out;
  --animation-float: float 3s ease-in-out infinite;
  --animation-pulse: pulse 2s ease-in-out infinite;
  --animation-shimmer: shimmer 2s linear infinite;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  
  /* ===== TRANSITIONS & ANIMATIONS ===== */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  /* ===== BREAKPOINTS ===== */
  /* Mobile-first breakpoints */
  --bp-mobile: 0px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --bp-ultra: 1920px;
  
  /* ===== Z-INDEX ===== */
  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-modal-backdrop: 299;
  --z-tooltip: 400;
  --z-notification: 500;
  
  /* ===== CONTAINER ===== */
  --container-max-width: 1200px;
  --container-padding: var(--space-4);
  
  /* ===== INTERACTIVE ELEMENTS ===== */
  --touch-target: 44px;               /* Minimum touch target size */
}

/* ===== RESPONSIVE SCALING (TABLET) ===== */
@media (min-width: 768px) {
  :root {
    /* Increase font sizes on tablet */
    --fs-base: 17px;
    --fs-lg: 19px;
    --fs-xl: 21px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;
    --fs-4xl: 44px;
    --fs-5xl: 52px;
    
    /* Increase spacing on tablet */
    --pad-section: var(--space-12);
    --pad-container: var(--space-6);
  }
}

/* ===== RESPONSIVE SCALING (DESKTOP) ===== */
@media (min-width: 1024px) {
  :root {
    /* Increase font sizes on desktop */
    --fs-base: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;
    --fs-4xl: 48px;
    --fs-5xl: 56px;
    
    /* Increase spacing on desktop */
    --pad-section: var(--space-16);
    --pad-container: var(--space-8);
  }
}

/* ===== WIDE SCREEN ===== */
@media (min-width: 1440px) {
  :root {
    --fs-base: 18px;
    --fs-5xl: 60px;
    --fs-6xl: 72px;
    --pad-section: var(--space-20);
  }
}