/* ============================================================================
   DRONIFY UI DESIGN LIBRARY - FOUNDATION DESIGN TOKENS
   Professional drone services brand - B2B focused design system
   ============================================================================ */

:root {
  /* ========== BRAND CORE COLORS ========== */
  --dronify-primary: #4690d4;
  --dronify-dark: #181c1d;
  --dronify-white: #ffffff;
  --dronify-black: #000000;
  
  /* ========== GLACIER MINIMAL PALETTE - CRITICAL FIXES ========== */
  --glacier-pure-white: #ffffff;        /* FIXED: True white backgrounds */
  --glacier-off-white: #fafafa;         /* FIXED: Very light gray */
  --glacier-light-gray: #f5f5f5;        /* FIXED: Light neutral */
  --glacier-medium-gray: #e0e0e0;       /* FIXED: Button borders */
  --glacier-text-primary: #333333;      /* FIXED: Primary text hierarchy */
  --glacier-text-secondary: #666666;    /* FIXED: Secondary text hierarchy */
  --glacier-text-tertiary: #999999;     /* FIXED: Tertiary text hierarchy */
  --glacier-dark-gray: #1a1a1a;
  --glacier-black: #000000;
  --glacier-accent: #4690d4;             /* Minimal usage only */
  --glacier-border-color: #e0e0e0;       /* Standard border color for forms and components */

  /* ========== COLOR PALETTES ========== */
  
  /* Palette 1: Professional Sky - Primary brand palette */
  --p1-primary: #4690d4;
  --p1-secondary: #2c5aa0;
  --p1-accent: #87ceeb;
  --p1-neutral: #f8f9fa;
  --p1-text: #181c1d;
  --p1-text-light: #6c757d;
  
  /* Palette 2: Corporate Trust - For executive-focused content */
  --p2-primary: #1e3a8a;
  --p2-secondary: #4690d4;
  --p2-accent: #60a5fa;
  --p2-neutral: #f1f5f9;
  --p2-text: #0f172a;
  --p2-text-light: #64748b;
  
  /* Palette 3: Modern Horizon - For technical/innovation content */
  --p3-primary: #0ea5e9;
  --p3-secondary: #181c1d;
  --p3-accent: #38bdf8;
  --p3-neutral: #f0f9ff;
  --p3-text: #0c4a6e;
  --p3-text-light: #475569;
  
  /* Palette 4: Glacier Minimal - CRITICAL: Updated for template compliance */
  --p4-primary: #000000;
  --p4-secondary: #333333;
  --p4-accent: #4690d4;                  /* Minimal usage */
  --p4-neutral: #ffffff;                 /* FIXED: Pure white backgrounds */
  --p4-text: #333333;                    /* FIXED: Primary text color */
  --p4-text-light: #666666;              /* FIXED: Secondary text color */

  /* ========== SEMANTIC COLOR SYSTEM ========== */
  
  /* Primary Colors */
  --color-primary-50: #f0f8ff;
  --color-primary-100: #e0f1fe;
  --color-primary-200: #bae3fd;
  --color-primary-300: #7dd0fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #4690d4; /* Brand primary */
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;

  /* ========== TYPOGRAPHY SYSTEM ========== */
  
  /* Font Families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-heading: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes - Type Scale */
  --text-2xs: 0.625rem;   /* 10px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */

  /* Line Heights - Updated for Glacier compliance */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;     /* Glacier standard: generous spacing */
  --leading-loose: 2.2;       /* Glacier standard: very spacious */
  --leading-glacier: 1.9;     /* Glacier specific line height */

  /* Letter Spacing - Updated for Glacier compliance */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Glacier Minimal Typography - CRITICAL: Generous letter spacing matching template */
  --tracking-glacier-tight: 0.05em;    /* Minimum Glacier spacing */
  --tracking-glacier-normal: 0.08em;   /* Standard Glacier spacing */
  --tracking-glacier-wide: 0.12em;     /* Generous Glacier spacing */
  --tracking-glacier-wider: 0.15em;    /* Maximum Glacier spacing */
  --tracking-glacier-button: 0.08em;   /* Specific for buttons */

  /* ========== SPACING SYSTEM ========== */
  
  /* Base spacing unit: 0.25rem (4px) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-11: 2.75rem;     /* 44px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-28: 7rem;        /* 112px */
  --space-32: 8rem;        /* 128px */
  --space-36: 9rem;        /* 144px */
  --space-40: 10rem;       /* 160px */
  --space-44: 11rem;       /* 176px */
  --space-48: 12rem;       /* 192px */
  --space-52: 13rem;       /* 208px */
  --space-56: 14rem;       /* 224px */
  --space-60: 15rem;       /* 240px */
  --space-64: 16rem;       /* 256px */
  --space-72: 18rem;       /* 288px */
  --space-80: 20rem;       /* 320px */
  --space-96: 24rem;       /* 384px */
  
  /* Glacier Minimal Spacing - Generous spacing for minimal aesthetic */
  --space-glacier-xs: 1rem;     /* 16px - Minimal breathing room */
  --space-glacier-sm: 2rem;     /* 32px - Small section spacing */
  --space-glacier-md: 4rem;     /* 64px - Medium section spacing */
  --space-glacier-lg: 6rem;     /* 96px - Large section spacing */
  --space-glacier-xl: 8rem;     /* 128px - Extra large spacing */
  --space-glacier-2xl: 12rem;   /* 192px - Hero section spacing */

  /* ========== LAYOUT SYSTEM ========== */
  
  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max: 1200px;

  /* Grid System */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-4: repeat(4, minmax(0, 1fr));
  --grid-cols-6: repeat(6, minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));

  /* Breakpoints for media queries */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ========== SHADOWS & ELEVATION ========== */
  
  --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);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Professional shadows for cards and components */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ========== BORDER RADIUS ========== */
  
  --radius-none: 0px;
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ========== TRANSITIONS & ANIMATIONS ========== */
  
  /* Transition Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Easing Functions */
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Common Transitions */
  --transition-all: all var(--duration-150) var(--ease-in-out);
  --transition-colors: color var(--duration-150) var(--ease-in-out), 
                      background-color var(--duration-150) var(--ease-in-out), 
                      border-color var(--duration-150) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-150) var(--ease-in-out);
  --transition-transform: transform var(--duration-150) var(--ease-in-out);

  /* ========== Z-INDEX SCALE ========== */
  
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --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;

  /* ========== ACCESSIBILITY & FOCUS ========== */
  
  /* Focus Ring Colors */
  --focus-ring-color: var(--color-primary-500);
  --focus-ring-offset-width: 2px;
  --focus-ring-width: 2px;
  
  /* Focus Ring Styles */
  --focus-ring: 0 0 0 var(--focus-ring-offset-width) var(--dronify-white), 
               0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset-width)) var(--focus-ring-color);
  --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* Reduced Motion */
  --transition-none: none;
  --animation-none: none;
}

/* ========== DARK THEME VARIATIONS ========== */

[data-theme="dark"] {
  --dronify-white: #0f172a;
  --dronify-dark: #f8fafc;
  
  /* Invert neutral colors for dark mode */
  --color-neutral-50: #0f172a;
  --color-neutral-100: #1e293b;
  --color-neutral-200: #334155;
  --color-neutral-300: #475569;
  --color-neutral-400: #64748b;
  --color-neutral-500: #94a3b8;
  --color-neutral-600: #cbd5e1;
  --color-neutral-700: #e2e8f0;
  --color-neutral-800: #f1f5f9;
  --color-neutral-900: #f8fafc;

  /* Adjust palette colors for dark mode */
  --p1-neutral: #1e293b;
  --p1-text: #f8fafc;
  --p1-text-light: #cbd5e1;
  
  --p2-neutral: #0f172a;
  --p2-text: #f8fafc;
  --p2-text-light: #e2e8f0;
  
  --p3-neutral: #0c4a6e;
  --p3-text: #f0f9ff;
  --p3-text-light: #cbd5e1;
}

/* ========== REDUCED MOTION PREFERENCES ========== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-all: var(--transition-none);
    --transition-colors: var(--transition-none);
    --transition-opacity: var(--transition-none);
    --transition-transform: var(--transition-none);
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== UTILITY CLASSES FOR DESIGN TOKENS ========== */

.font-primary { font-family: var(--font-primary); }
.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

.text-primary { color: var(--color-primary-500); }
.text-neutral { color: var(--color-neutral-600); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-primary { background-color: var(--color-primary-500); }
.bg-neutral { background-color: var(--color-neutral-100); }
.bg-success { background-color: var(--color-success-light); }
.bg-warning { background-color: var(--color-warning-light); }
.bg-error { background-color: var(--color-error-light); }

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }
.shadow-modal { box-shadow: var(--shadow-modal); }

.rounded { border-radius: var(--radius-base); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.transition { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-opacity { transition: var(--transition-opacity); }
.transition-transform { transition: var(--transition-transform); }

/* ========== GLACIER MINIMAL UTILITY CLASSES ========== */

/* Glacier Typography - CRITICAL: Updated for template compliance */
.text-glacier-heading {
  font-family: var(--font-heading);
  font-weight: 300;                                   /* FIXED: Glacier standard light */
  text-transform: uppercase;
  letter-spacing: var(--tracking-glacier-wide);      /* 0.12em - generous spacing */
  line-height: var(--leading-glacier);               /* 1.9 - spacious */
  color: var(--glacier-text-gray);
}

.text-glacier-title {
  font-family: var(--font-heading);
  font-weight: 300;                                   /* FIXED: Light weight only */
  text-transform: uppercase;
  letter-spacing: var(--tracking-glacier-wider);     /* 0.15em - maximum spacing */
  line-height: var(--leading-glacier);
  color: #333333;                                     /* FIXED: Precise Glacier text color */
}

.text-glacier-body {
  font-family: var(--font-primary);
  font-weight: 400;                                   /* FIXED: Normal weight max */
  color: #333333;                                     /* FIXED: Primary text color */
  line-height: var(--leading-relaxed);               /* 1.8 - generous spacing */
  letter-spacing: 0.02em;                             /* Subtle spacing for body text */
}

/* Glacier Spacing */
.space-glacier-xs { margin: var(--space-glacier-xs); }
.space-glacier-sm { margin: var(--space-glacier-sm); }
.space-glacier-md { margin: var(--space-glacier-md); }
.space-glacier-lg { margin: var(--space-glacier-lg); }
.space-glacier-xl { margin: var(--space-glacier-xl); }
.space-glacier-2xl { margin: var(--space-glacier-2xl); }

.mt-glacier-xs { margin-top: var(--space-glacier-xs); }
.mt-glacier-sm { margin-top: var(--space-glacier-sm); }
.mt-glacier-md { margin-top: var(--space-glacier-md); }
.mt-glacier-lg { margin-top: var(--space-glacier-lg); }
.mt-glacier-xl { margin-top: var(--space-glacier-xl); }
.mt-glacier-2xl { margin-top: var(--space-glacier-2xl); }

.mb-glacier-xs { margin-bottom: var(--space-glacier-xs); }
.mb-glacier-sm { margin-bottom: var(--space-glacier-sm); }
.mb-glacier-md { margin-bottom: var(--space-glacier-md); }
.mb-glacier-lg { margin-bottom: var(--space-glacier-lg); }
.mb-glacier-xl { margin-bottom: var(--space-glacier-xl); }
.mb-glacier-2xl { margin-bottom: var(--space-glacier-2xl); }

/* Glacier Colors - CRITICAL: Updated with proper hierarchy */
.bg-glacier-white { background-color: var(--glacier-pure-white); }
.bg-glacier-off-white { background-color: var(--glacier-off-white); }
.bg-glacier-light { background-color: var(--glacier-light-gray); }
.bg-glacier-medium { background-color: var(--glacier-medium-gray); }

.text-glacier-primary { color: var(--glacier-text-primary); }      /* #333333 */
.text-glacier-secondary { color: var(--glacier-text-secondary); }  /* #666666 */
.text-glacier-tertiary { color: var(--glacier-text-tertiary); }    /* #999999 */
.text-glacier-dark { color: var(--glacier-dark-gray); }
.text-glacier-accent { color: var(--glacier-accent); }             /* Minimal usage */

/* Legacy classes for compatibility */
.text-glacier-text { color: var(--glacier-text-primary); }
.text-glacier-light { color: var(--glacier-text-secondary); }

/* Glacier Layout */
.glacier-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.glacier-grid {
  display: grid;
  gap: var(--space-glacier-sm);
}

.glacier-grid-2 { grid-template-columns: repeat(2, 1fr); }
.glacier-grid-3 { grid-template-columns: repeat(3, 1fr); }
.glacier-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Glacier Minimal Buttons - CRITICAL: Updated for compliance */
.btn-glacier {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 300;                                   /* FIXED: Light weight */
  text-transform: uppercase;
  letter-spacing: var(--tracking-glacier-button);    /* FIXED: 0.08em proper spacing */
  text-decoration: none;
  text-align: center;
  border: 1px solid #e0e0e0;                         /* FIXED: Light border as per report */
  background-color: transparent;
  color: #333333;                                     /* FIXED: Proper text color */
  cursor: pointer;
  transition: var(--transition-all);
  border-radius: 0;                                   /* Keep sharp corners for Glacier */
}

.btn-glacier:hover {
  background-color: #333333;                          /* FIXED: Subtle fill transition */
  color: var(--glacier-pure-white);
  text-decoration: none;
  border-color: #333333;
}

.btn-glacier-primary {
  border-color: #333333;
  background-color: #333333;
  color: var(--glacier-pure-white);
}

.btn-glacier-primary:hover {
  background-color: transparent;
  color: #333333;
  border-color: #e0e0e0;                              /* FIXED: Light border on hover */
}

/* Glacier Portfolio Grid */
.glacier-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-glacier-sm);
  margin: var(--space-glacier-md) 0;
}

.glacier-portfolio-item {
  position: relative;
  overflow: hidden;
  background-color: var(--glacier-light-gray);
  transition: var(--transition-all);
}

.glacier-portfolio-item:hover {
  transform: translateY(-2px);
}

.glacier-portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition-transform);
}

.glacier-portfolio-item:hover img {
  transform: scale(1.02);
}

.glacier-portfolio-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-glacier-normal);
  color: var(--glacier-dark-gray);
  text-align: center;
  transform: translateY(100%);
  transition: var(--transition-transform);
}

.glacier-portfolio-item:hover .glacier-portfolio-title {
  transform: translateY(0);
}

/* Responsive Design for Glacier Components - CRITICAL: Mobile optimization */
/* CRITICAL MOBILE FIXES - Enhanced mobile experience */
@media (max-width: 767px) {
  .glacier-grid-2,
  .glacier-grid-3,
  .glacier-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .glacier-portfolio {
    grid-template-columns: 1fr;
    gap: var(--space-glacier-xs);
  }
  
  /* FIXED: Mobile typography with proper scaling */
  .text-glacier-heading {
    letter-spacing: var(--tracking-glacier-normal);  /* 0.08em - reduced for mobile */
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); /* Responsive scaling */
  }
  
  .text-glacier-title {
    letter-spacing: var(--tracking-glacier-normal);  /* 0.08em - reduced for mobile */
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); /* Responsive scaling */
  }
  
  .text-glacier-body {
    font-size: clamp(var(--text-base), 2.5vw, var(--text-lg)); /* Better mobile readability */
    line-height: 1.6; /* CRITICAL: Better mobile readability */
    letter-spacing: 0.01em; /* Slight spacing for mobile */
  }
  
  /* CRITICAL FIX: Base typography mobile optimization */
  h1, .text-4xl, .text-5xl {
    line-height: 1.2 !important;
  }
  
  h2, .text-2xl, .text-3xl {
    line-height: 1.3 !important;
  }
  
  h3, h4, .text-xl, .text-lg {
    line-height: 1.4 !important;
  }
  
  p, .text-base, .text-sm {
    line-height: 1.6 !important;
  }
  
  /* FIXED: Generous mobile spacing as per Glacier standards */
  .space-glacier-md { margin: var(--space-glacier-sm); }
  .space-glacier-lg { margin: var(--space-glacier-md); }
  .space-glacier-xl { margin: var(--space-glacier-lg); }
  .space-glacier-2xl { margin: var(--space-glacier-xl); }
  
  /* CRITICAL FIX: Mobile button improvements */
  .btn-glacier {
    letter-spacing: var(--tracking-glacier-normal); /* 0.08em for mobile */
    min-height: 48px; /* Enhanced touch target compliance */
    min-width: 48px;
    padding: var(--space-4) var(--space-6); /* Larger mobile padding */
    font-size: var(--text-base); /* Larger mobile text */
  }
  
  /* CRITICAL FIX: General mobile button optimization */
  .btn, button, input[type="button"], input[type="submit"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: var(--space-4) var(--space-6) !important;
    font-size: var(--text-base) !important;
  }
  
  /* CRITICAL FIX: Mobile touch target spacing */
  .btn + .btn,
  button + button {
    margin-top: var(--space-3);
    margin-left: 0;
  }
}