/* ============================================================
   core/tokens.css
   Design tokens globales (colores, espaciado, tipografía, etc.)
   ============================================================ */

:root {
  /* ================================
     PALETA PRINCIPAL (brand)
     ================================ */

  /* Azul clínico basado en tu logo */
  --color-brand:         #26C7D5;
  --color-brand-light:   #5ADBE5;
  --color-brand-lighter: #C8F4F8;
  --color-brand-soft:    #ECFBFD;

  --color-brand-dark:    #148A94;
  --color-brand-darker:  #0B5B63;

  /* Alias “brand-X00” (usado en varios CSS) */
  --brand-200: var(--color-brand-soft);
  --brand-400: var(--color-brand-light);
  --brand-600: var(--color-brand-dark);
  --brand-700: var(--color-brand-darker);

  /* Accent secundario (azul profundo profesional) */
  --color-accent:      #0F4C81;
  --color-accent-soft: #E3EDF7;

  /* Blanco / negro base */
  --color-white: #FFFFFF;
  --color-black: #111111;

  /* ================================
     GRAYS / NEUTRALES
     ================================ */

  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2933;
  --gray-900: #111827;

  /* Alias neutral-* (usados en typography/utilities) */
  --neutral-50:  var(--gray-50);
  --neutral-100: var(--gray-100);
  --neutral-200: var(--gray-200);
  --neutral-300: var(--gray-300);
  --neutral-400: var(--gray-400);
  --neutral-500: var(--gray-500);
  --neutral-600: var(--gray-600);
  --neutral-700: var(--gray-700);
  --neutral-800: var(--gray-800);
  --neutral-900: var(--gray-900);

  /* Alias grey-* (ortografía alternativa usada en layout/components) */
  --grey-50:  var(--gray-50);
  --grey-100: var(--gray-100);
  --grey-200: var(--gray-200);
  --grey-300: var(--gray-300);
  --grey-400: var(--gray-400);
  --grey-500: var(--gray-500);
  --grey-600: var(--gray-600);
  --grey-700: var(--gray-700);
  --grey-800: var(--gray-800);
  --grey-900: var(--gray-900);

  /* ================================
     ESTADOS (semantic)
     ================================ */

  --color-success:      #1B9C85;
  --color-success-soft: #E5F7F3;

  --color-warning:      #F5A623;
  --color-warning-soft: #FFF7E6;

  --color-danger:       #D64545;
  --color-danger-soft:  #FDECEC;

  --color-info:         #2F86C0;
  --color-info-soft:    #E4F1FB;

  /* ================================
     TEXTO
     ================================ */
  /* Headings (títulos de contenido) */
  --color-heading: var(--gray-800);

  --color-text:         var(--gray-800);
  --color-text-soft:    var(--gray-600);
  --color-text-muted:   var(--gray-500);
  --color-text-inverse: #FFFFFF;

  /* Alias de texto (usados en otros CSS) */
  --text:     var(--color-text);
  --text-700: var(--gray-700);
  --text-800: var(--gray-800);

  /* ================================
     FONDOS Y SUPERFICIES
     ================================ */

  --color-bg:          #FFFFFF;
  --color-bg-soft:     var(--gray-50);
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F8FAFC;

  --color-border-subtle: var(--gray-200);
  --color-border-strong: var(--gray-300);

  /* Alias borde genérico (para forms, etc.) */
  --border-color: var(--color-border-subtle);

  /* ================================
     ELEMENTOS INTERACTIVOS
     ================================ */

  /* Paleta primaria tipo "primary-*" (para tipografía/utilities/buttons) */
  --primary-300: var(--color-brand-light);
  --primary-400: var(--color-brand);
  --primary-500: var(--color-brand);
  --primary-600: var(--color-brand-dark);
  --primary-700: var(--color-brand-darker);

  /* Botones principales (basados en brand) */
  --btn-primary:        var(--color-brand-dark);
  --btn-primary-hover:  #0F6F76;
  --btn-primary-active: var(--color-brand-darker);

  /* Botón “accent” (alias usado en varios CSS, ej. hover) */
  --btn-accent: var(--btn-primary-hover);

  /* Botón secundario (grises) */
  --btn-secondary-bg:       var(--gray-100);
  --btn-secondary-bg-hover: var(--gray-200);
  --btn-secondary-border:   var(--gray-300);

  /* Enlaces */
  --link-color:       #0F7F8B;
  --link-hover-color: var(--color-brand-darker);
    /* Headings accent (subrayado sutil) */
  --heading-accent: rgba(38, 199, 213, 0.35);


  /* Colores específicos de iconos/botones flotantes */
  --color-whatsapp:   #188741;
  --color-scroll-top: #0F7F8B;

  /* ================================
     LAYOUT / RADIOS / ESPACIADO
     ================================ */

  --container-width: 1200px;

  /* Altura del header
     Fallback antes de que nav.js calcule la real */
  --header-height: 70px;

  /* Radios */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-pill: 999px;

  /* Escala de espaciado (rem) */
  --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 */

  /* ================================
     TIPOGRAFÍA (TOKENS)
     ================================ */

  --font-family-base: 'Poppins', system-ui, -apple-system,
                      BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Alias para compatibilidad con typography.css */
  --font-ui: var(--font-family-base);

  --font-size-xs:  0.75rem;  /* 12px */
  --font-size-sm:  0.875rem; /* 14px */
  --font-size-md:  1rem;     /* 16px */
  --font-size-lg:  1.125rem; /* 18px */
  --font-size-xl:  1.25rem;  /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* ================================
     SOMBRAS / ELEVACIÓN
     ================================ */

  --shadow-xs: 0 1px 2px  rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px  rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px  rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.15);

  /* Alias legacy (por compatibilidad con CSS antiguo) */
  --shadow:           var(--shadow-md);
  --shadow-sm-legacy: var(--shadow-sm);
  --shadow-lg-legacy: var(--shadow-lg);

  /* ================================
     Z-INDEX SYSTEM
     ================================ */

  --z-base:   1;
  --z-header: 1200;
  --z-overlay: 1100;
  --z-modal:  1200;
  --z-toast:  1300;

  /* ================================
     BREAKPOINTS
     ================================ */

  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ================================
     TRANSICIONES
     ================================ */

  --transition-fast:   150ms ease-out;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ================================
     ALIAS DE COMPATIBILIDAD EXTRA
     (para CSS antiguo que ya tienes)
     ================================ */

  /* Nombres “legacy” que usaba tu CSS viejo */
  --brand:      var(--color-brand);
  --brand-dark: var(--color-brand-dark);
  --accent:     var(--color-accent);
  --danger:     var(--color-danger);
  --whatsapp:   var(--color-whatsapp);
  --scroll-top: var(--color-scroll-top);
}