/* ==========================================================================
   BEES TECHNOLOGIES - DESIGN SYSTEM & BRAND TOKENS
   ========================================================================== */

:root {
  /* Brand Primary & Secondary Palette (BEES LOGO EXTRACTED) */
  --color-emerald-deep: #0F6B5B;
  --color-emerald-medium: #158A75;
  --color-emerald-light: #1FB399;
  --color-emerald-tint: #EEF8F6;

  --color-copper-deep: #B85B1F;
  --color-copper-medium: #C36A2D;
  --color-copper-light: #E08244;
  --color-copper-tint: #FAF2EC;

  --color-honey-gold: #E7A72A;
  --color-honey-tint: #FDF7E8;

  /* Neutral Base & Surface System */
  --color-dark-graphite: #1F2328;
  --color-dark-slate: #30363D;
  --color-text-muted: #656D76;
  --color-bg-light: #EEF2F3;
  --color-bg-soft-white: #FAFBFC;
  --color-surface-white: #FFFFFF;

  /* Brand Signature Gradients */
  --gradient-emerald-text: linear-gradient(135deg, #0F6B5B 0%, #1FB399 100%);
  --gradient-copper-text: linear-gradient(135deg, #C36A2D 0%, #E08244 100%);
  --gradient-emerald-copper: linear-gradient(135deg, #0F6B5B 0%, #C36A2D 100%);
  --gradient-topbar-dark: linear-gradient(90deg, #1F2328 0%, #0F6B5B 100%);
  --gradient-emerald-gold: linear-gradient(135deg, #0F6B5B 0%, #E7A72A 100%);
  --gradient-soft-surface: linear-gradient(180deg, #FAFBFC 0%, #EEF2F3 100%);

  /* Dynamic Glassmorphism Parameters */
  --glass-bg-light: rgba(255, 255, 255, 0.92);
  --glass-bg-drawer: rgba(255, 255, 255, 0.98);
  --glass-border: rgba(15, 107, 91, 0.12);
  --glass-border-hover: rgba(195, 106, 45, 0.35);
  --glass-blur: blur(20px);

  /* Layout Heights & Dimensions (Desktop Default) */
  --topbar-height: 40px;
  --header-height: 96px;
  --header-scrolled-height: 80px;
  --logo-height: 54px;
  --logo-scrolled-height: 44px;

  /* Border Radii System */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-pill: 50px;

  /* Elevation Shadows */
  --shadow-sm: 0 4px 12px rgba(31, 35, 40, 0.04);
  --shadow-md: 0 10px 30px rgba(15, 107, 91, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 107, 91, 0.14);
  --shadow-emerald-glow: 0 10px 25px rgba(15, 107, 91, 0.25);
  --shadow-copper-glow: 0 10px 25px rgba(195, 106, 45, 0.25);

  /* Typography System */
  --font-heading: 'Outfit', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Animation Timings */
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive Variable Adjustments for Mobile and Tablet */
@media (max-width: 991px) {
  :root {
    --topbar-height: 36px;
    --header-height: 76px;
    --header-scrolled-height: 70px;
    --logo-height: 42px;
    --logo-scrolled-height: 38px;
  }
}

/* ==========================================================================
   BRAND TEXT GRADIENT UTILITIES (Fixes Invisible Hero Words)
   ========================================================================== */
/* FORCE TEXT GRADIENT VISIBILITY */
.text-gradient-emerald {
  background-image: linear-gradient(135deg, #0F6B5B 0%, #1FB399 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0F6B5B !important; /* Visual fallback if background-clip fails */
  display: inline !important; /* Switched to inline so it flows naturally in headings */
}

.text-gradient-copper {
  background-image: linear-gradient(135deg, #C36A2D 0%, #E08244 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #C36A2D !important; /* Visual fallback if background-clip fails */
  display: inline !important; /* Switched to inline so it flows naturally in headings */
}