/* ============================================================================
   CSS Variables - LandScout Premium Design System
   ============================================================================
   
   REDESIGN v2.0 - Optimizado para accesibilidad 60+ y estética SaaS premium
   
   Principios:
   - Contraste alto WCAG AA/AAA
   - Tamaños generosos para facilidad de uso
   - Paleta moderna pero sobria
   
   Last updated: 2025-12-17
   ============================================================================ */

:root {
   /* ========================================
       Colors - Authority Palette v3.0
       Premium B2B SaaS with high contrast
       ======================================== */

   /* Primary - Deep Indigo (Trust & Authority) */
   --primary: #1e1b4b;
   --primary-hover: #312e81;
   --primary-light: #4338ca;

   /* Secondary - Authority Slate */
   --secondary: #3f3f46;

   /* Accent - Vibrant Blue (Clear CTAs) */
   --accent: #2563eb;
   --accent-hover: #1d4ed8;
   --accent-light: #3b82f6;

   /* Success / Warning / Error - Authority Tones */
   --success: #065f46;
   /* Deep Emerald */
   --success-light: #059669;
   --warning: #b45309;
   --warning-light: #f59e0b;
   --error: #991b1b;
   /* Granate técnico */
   --error-light: #dc2626;

   /* Agency Gold - Echo Chamber / Premium Data */
   --agency-gold: #b45309;
   --agency-gold-light: #d97706;
   --agency-gold-dark: #92400e;
   --agency-gold-subtle: rgba(180, 83, 9, 0.1);

   /* Score States */
   --score-danger: #991b1b;
   --score-danger-glow: rgba(153, 27, 27, 0.3);
   --score-warning: #b45309;
   --score-warning-glow: rgba(180, 83, 9, 0.3);
   --score-success: #065f46;
   --score-success-glow: rgba(6, 95, 70, 0.3);

   /* ========================================
       Colors - Backgrounds (Clean & Premium)
       ======================================== */

   /* Body - Soft warm gray */
   --bg-body: #f8fafc;
   --bg-section-alt: #f1f5f9;

   /* Cards - Pure white with depth */
   --bg-card: #ffffff;
   --bg-card-elevated: #ffffff;

   /* Echo Chamber - Private Data Look */
   --bg-echo: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
   --bg-echo-locked: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%);

   /* ========================================
       Colors - Text (Maximum Readability)
       4.5:1 minimum contrast guaranteed
       ======================================== */

   /* Main text - Very dark for high contrast */
   --text-main: #0f172a;
   /* 16.1:1 on white */
   --text-secondary: #1e293b;
   /* 11.5:1 on white - bumped from #334155 */
   --text-muted: #475569;
   /* 5.7:1 on white - bumped from #64748b */
   --text-on-dark: #f8fafc;
   --text-on-accent: #ffffff;
   --text-on-gold: #ffffff;

   /* ========================================
       Colors - UI Elements
       ======================================== */

   --border: #cbd5e1;
   --border-light: #e2e8f0;
   --border-focus: var(--accent);
   --border-gold: var(--agency-gold);

   /* ========================================
       Shadows - Premium Depth v3.0
       ======================================== */

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

   /* Inner shadows for depth */
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   --shadow-inner-deep: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);

   /* Glow shadows for states */
   --shadow-glow-success: 0 0 20px rgba(4, 120, 87, 0.4);
   --shadow-glow-warning: 0 0 20px rgba(180, 83, 9, 0.4);
   --shadow-glow-danger: 0 0 20px rgba(153, 27, 27, 0.4);
   --shadow-glow-gold: 0 0 15px rgba(180, 83, 9, 0.3);

   /* ========================================
       Border Radius - Generous & Modern
       ======================================== */

   --radius-sm: 8px;
   --radius: 16px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --radius-full: 9999px;

   /* ========================================
       Typography - Large & Readable
       ======================================== */

   --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

   /* Font sizes - Generous for 60+ accessibility */
   --text-xs: 0.875rem;
   /* 14px */
   --text-sm: 1rem;
   /* 16px */
   --text-base: 1.125rem;
   /* 18px - Base for body */
   --text-lg: 1.25rem;
   /* 20px */
   --text-xl: 1.5rem;
   /* 24px */
   --text-2xl: 1.875rem;
   /* 30px */
   --text-3xl: 2.25rem;
   /* 36px */
   --text-4xl: 3rem;
   /* 48px */
   --text-5xl: 3.75rem;
   /* 60px */

   /* Line heights - Comfortable reading */
   --leading-tight: 1.25;
   --leading-normal: 1.6;
   --leading-relaxed: 1.75;

   /* Font weights */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* ========================================
       Spacing - Generous & Clear
       ======================================== */

   --space-xs: 0.5rem;
   /* 8px */
   --space-sm: 0.75rem;
   /* 12px */
   --space-md: 1rem;
   /* 16px */
   --space-lg: 1.5rem;
   /* 24px */
   --space-xl: 2rem;
   /* 32px */
   --space-2xl: 3rem;
   /* 48px */
   --space-3xl: 4rem;
   /* 64px */
   --space-4xl: 6rem;
   /* 96px */

   /* ========================================
       Click Targets - Accessibility
       ======================================== */

   --min-touch-target: 48px;
   /* WCAG minimum */
   --comfortable-touch: 56px;

   /* ========================================
       Transitions - Smooth & Slow for clarity
       ======================================== */

   --transition-fast: 200ms ease;
   --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
   --transition-premium: 600ms cubic-bezier(0.16, 1, 0.3, 1);

   /* ========================================
       Z-Index Scale
       ======================================== */

   --z-base: 1;
   --z-dropdown: 10;
   --z-sticky: 50;
   --z-modal: 100;
   --z-tooltip: 150;
}

/* ========================================
   Global Base Styles
   ======================================== */

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   font-size: 100%;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-main);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   color: var(--text-main);
   background-color: var(--bg-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: 0;
}

/* Focus visible - Clear focus states */
:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 3px;
}

/* Links - Clear and accessible */
a {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 3px;
}

a:hover {
   color: var(--accent-hover);
}

/* Headings - Clear hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--text-main);
   line-height: var(--leading-tight);
   font-weight: var(--font-bold);
   margin-top: 0;
}

h1 {
   font-size: var(--text-4xl);
   letter-spacing: -0.02em;
}

h2 {
   font-size: var(--text-3xl);
   letter-spacing: -0.01em;
}

h3 {
   font-size: var(--text-2xl);
}

h4 {
   font-size: var(--text-xl);
}

p {
   margin-top: 0;
   margin-bottom: var(--space-lg);
}

/* Container - Generous max-width */
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
   .container {
      padding: 0 var(--space-lg);
   }

   h1 {
      font-size: var(--text-3xl);
   }

   h2 {
      font-size: var(--text-2xl);
   }
}