/* ==========================================================================
   THEME.CSS - Diseño UI/UX Premium Médico
   ========================================================================== */

:root {
  /* --- Paleta verde corporativa (Refinada) --- */
  --color-primary:        #1A6B3C;
  --color-primary-dark:   #0D4A26;
  --color-primary-light:  #238B4F;
  --color-accent:         #4ADE80;
  --color-accent-dark:    #22C55E;
  --color-accent-light:   #BBF7D0;

  /* --- Neutros (Ajuste de grises fríos para estética médica) --- */
  --color-white:          #FFFFFF;
  --color-gray-50:        #F8FAFC;
  --color-gray-100:       #F1F5F9;
  --color-gray-200:       #E2E8F0;
  --color-gray-300:       #CBD5E1;
  --color-gray-400:       #94A3B8;
  --color-gray-500:       #64748B;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;

  /* --- Semánticos --- */
  --color-text:           var(--color-gray-700);
  --color-text-light:     var(--color-gray-500);
  --color-text-heading:   var(--color-primary);
  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-gray-50);
  --color-border:         var(--color-gray-200);
  --color-danger:         #EF4444;
  --color-danger-light:   #FEF2F2;
  --color-success:        #10B981;
  --color-success-light:  #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFFBEB;

  /* --- Tipografía --- */
  --font-family:          'Poppins', system-ui, -apple-system, sans-serif;
  --fs-xs:                0.75rem;
  --fs-sm:                0.875rem;
  --fs-base:              1rem;
  --fs-md:                1.125rem;
  --fs-lg:                1.25rem;
  --fs-xl:                1.5rem;
  --fs-2xl:               2rem;
  --fs-3xl:               2.5rem;
  --lh-tight:             1.2;
  --lh-normal:            1.6;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:         600;
  --fw-bold:              700;

  /* --- Espaciado --- */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --space-6:              1.5rem;
  --space-8:              2rem;
  --space-10:             2.5rem;
  --space-12:             3rem;
  --space-16:             4rem;

  /* --- Bordes y Sombras (Multicapa para profundidad realista) --- */
  --radius-sm:            6px;
  --radius-md:            10px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;
  
  --shadow-xs:            0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:            0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:            0 4px 6px -1px rgba(0,0,0,0.05), 0 10px 15px -3px rgba(0,0,0,0.05);
  --shadow-lg:            0 10px 15px -3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.08);
  --shadow-xl:            0 20px 25px -5px rgba(0,0,0,0.08), 0 30px 50px -6px rgba(0,0,0,0.1);
  --shadow-inner:         inset 0 2px 4px rgba(0,0,0,0.05);
  --shadow-focus:         0 0 0 3px rgba(26, 107, 60, 0.15);

  /* --- Transiciones --- */
  --transition-fast:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      400ms cubic-bezier(0.4, 0, 0.2, 1);
}