/* ==========================================================================
   SOLUCIONES HOSPITALARIAS — DESIGN SYSTEM TOKENS
   Versión: 2.0 (Art Direction Refined)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     01. PALETAS CROMÁTICAS OFICIALES
     ------------------------------------------------------------------------ */
  
  /* Paleta Institucional (Estructural & Confianza) */
  --color-brand-blue: #004AAD;        /* Azul Hospitalario Principal */
  --color-brand-blue-rgb: 0, 74, 173;
  --color-brand-blue-dark: #003680;
  --color-brand-blue-deep: #061F41;   /* Azul Marino Noche para textos de máximo contraste */
  --color-brand-blue-light: #1A64C9;

  --color-brand-cyan: #38B6FF;        /* Azul Cielo / Acento Luminoso */
  --color-brand-cyan-rgb: 56, 182, 255;
  --color-brand-cyan-light: #70CBFF;
  --color-brand-cyan-soft: #E5F5FF;
  --color-brand-cyan-glow: rgba(56, 182, 255, 0.4);

  --color-brand-gray: #A6A6A6;        /* Gris Plata / Neutro */
  --color-brand-gray-rgb: 166, 166, 166;
  --color-brand-gray-light: #F1F5F9;
  --color-brand-gray-mid: #94A3B8;
  --color-brand-gray-dark: #475569;

  --color-pure-white: #FFFFFF;
  --color-pure-white-rgb: 255, 255, 255;

  /* Atmósfera de Cielo & Luz Diurna (Cuidado en las Nubes) */
  --sky-top: #FFFFFF;
  --sky-sun-glow: #F6FBFF;
  --sky-horizon: #DCEEFE;
  --sky-deep: #C7E4FC;
  --sky-ambient: #EAF4FD;

  /* Paleta Humana (Cuidado & Calidez) */
  --color-human-sage: #7FAF9A;
  --color-human-ivory: #FAF9F6;
  --color-human-night: #12345B;

  /* Paleta Clínica & Premium */
  --color-clinical-bg: #E8EEF3;
  --color-clinical-steel: #486581;
  --color-premium-navy: #071D35;

  /* Textos & Jerarquía */
  --color-text-primary: #0A192F;       /* Azul marino noche profundo WCAG AAA */
  --color-text-secondary: #334155;     /* Gris azulado de alta legibilidad */
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-text-inverse: #FFFFFF;

  /* WhatsApp Oficial */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5B;
  --color-whatsapp-dark: #128C7E;

  /* ------------------------------------------------------------------------
     02. TIPOGRAFÍA REFINADA
     ------------------------------------------------------------------------ */
  --font-editorial: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala Tipográfica Fluida */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);      /* 12-13px */
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);      /* 14-15px */
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);       /* 16-17px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);      /* 18-20px */
  --text-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);           /* 21-26px */
  --text-2xl: clamp(1.65rem, 1.45rem + 0.8vw, 2.1rem);        /* 26-34px */
  --text-3xl: clamp(2.1rem, 1.8rem + 1.2vw, 2.75rem);         /* 34-44px */
  --text-4xl: clamp(2.65rem, 2.2rem + 1.8vw, 3.6rem);         /* 42-58px */
  --text-hero: clamp(2.85rem, 2.3rem + 3vw, 5.2rem);          /* 46-83px Editorial Grand */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-hero: 1.06;
  --line-height-tight: 1.18;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  --letter-spacing-hero: -0.025em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;
  --letter-spacing-tag: 0.16em;

  /* ------------------------------------------------------------------------
     03. ESPACIADO & LAYOUT
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  --nav-height: 84px;
  --container-max-w: 1320px;
  --container-hero-w: 1040px;
  --container-narrow-w: 880px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);

  /* ------------------------------------------------------------------------
     04. BORDES & RADIUS
     ------------------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ------------------------------------------------------------------------
     05. SOMBRAS ATMOSFÉRICAS & PROFUNDIDAD
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 4px 20px rgba(0, 74, 173, 0.05);
  --shadow-ambient: 0 12px 36px -4px rgba(0, 40, 100, 0.08);
  --shadow-floating: 0 28px 60px -12px rgba(0, 45, 110, 0.15), 0 10px 24px -6px rgba(56, 182, 255, 0.12);
  --shadow-glow-cyan: 0 0 40px rgba(56, 182, 255, 0.35);
  --shadow-glow-sun: 0 0 80px rgba(255, 255, 255, 0.9);
  --shadow-contact-cloud: 0 35px 50px -15px rgba(0, 50, 120, 0.14);

  /* ------------------------------------------------------------------------
     06. GLASSMORPHISM ULTRA SUTIL (NO DOMINANTE)
     ------------------------------------------------------------------------ */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-border-subtle: rgba(0, 74, 173, 0.06);
  --glass-blur: 14px;

  /* ------------------------------------------------------------------------
     07. Z-INDEX SYSTEM
     ------------------------------------------------------------------------ */
  --z-negative: -1;
  --z-base: 1;
  --z-sky: 2;
  --z-clouds-bg: 5;
  --z-hero-bg-products: 8;
  --z-clouds-mid: 10;
  --z-hero-main-products: 14;
  --z-hero-content: 20;
  --z-clouds-fg: 25;
  --z-header: 100;
  --z-drawer: 300;
  --z-preloader: 1000;

  /* ------------------------------------------------------------------------
     08. MOTION & EASING NATURAL
     ------------------------------------------------------------------------ */
  --ease-natural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-gentle: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-instant: 0.18s;
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-macro: 1.3s;
  --duration-ambient-slow: 28s;
  --duration-ambient-mid: 18s;
}