/* ============================================================
   DESIGN TOKENS — fuente única de verdad
   Para cambiar la paleta, tipografía o espaciados del sitio
   edita SOLO este archivo.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PALETA DE COLORES
     Cambia aquí para rediseñar todo el sitio de una vez.
     ---------------------------------------------------------- */

  /* Marca principal */
  --color-gold:        #c9a84c;   /* Dorado — acentos, bordes, íconos */
  --color-gold-light:  #e0c070;   /* Dorado claro — hover de acentos  */
  --color-navy:        #1e2d5a;   /* Azul marino — fondos, botones     */
  --color-navy-dark:   #162244;   /* Azul marino oscuro — hover        */
  --color-navy-bg:     #f0f3fa;   /* Azul muy claro — fondos de sección*/
  --color-white:       #ffffff;

  /* Texto */
  --color-text:        #374151;   /* Texto general */
  --color-text-light:  #6b7280;   /* Texto secundario / subtítulos     */

  /* Neutros */
  --color-gray-light:  #f8fafc;
  --color-gray-mid:    #6b7280;
  --color-gray-dark:   #374151;

  /* Estado */
  --color-success:     #10b981;
  --color-warning:     #f59e0b;
  --color-error:       #ef4444;

  /* Alias semánticos — úsalos en los componentes,
     no los colores crudos de arriba.                          */
  --color-primary:     var(--color-gold);       /* acento dorado       */
  --color-secondary:   var(--color-navy);       /* azul marino         */
  --color-accent:      var(--color-gold-light); /* hover dorado        */
  --color-hover:       var(--color-navy-dark);  /* hover azul          */
  --color-title:       var(--color-navy);       /* títulos             */
  --color-checkmark:   var(--color-gold);       /* palomitas           */
  --color-bg-section:  var(--color-navy-bg);    /* fondos alternos     */

  /* Compatibilidad con código existente
     (apuntan a los alias semánticos)                          */
  --primary-color:     var(--color-primary);
  --secondary-color:   var(--color-secondary);
  --accent-color:      var(--color-accent);
  --hover-color:       var(--color-hover);
  --title-color:       var(--color-title);
  --checkmark-color:   var(--color-checkmark);
  --white:             var(--color-white);
  --light-gray:        var(--color-gray-light);
  --medium-gray:       var(--color-gray-mid);
  --dark-gray:         var(--color-gray-dark);
  --text-color:        var(--color-text);
  --text-light:        var(--color-text-light);
  --success-color:     var(--color-success);
  --warning-color:     var(--color-warning);
  --error-color:       var(--color-error);

  /* ----------------------------------------------------------
     TIPOGRAFÍA
     ---------------------------------------------------------- */
  --font-primary:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:  'Playfair Display', Georgia, serif;

  /* Escala de tamaños */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 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 */
  --font-size-5xl:  3rem;       /* 48px */

  /* Pesos */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ----------------------------------------------------------
     ESPACIADO — sistema de 8 px
     ---------------------------------------------------------- */
  --spacing-xs:  0.25rem;   /*  4px */
  --spacing-sm:  0.5rem;    /*  8px */
  --spacing-md:  1rem;      /* 16px */
  --spacing-lg:  1.5rem;    /* 24px */
  --spacing-xl:  2rem;      /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max-width: 1200px;
  --container-padding:   1rem;
  --border-radius:       0.5rem;
  --border-radius-lg:    1rem;

  /* Breakpoints (referencia, no se usan en calc() pero
     sirven de documentación junto a responsive.css)          */
  --breakpoint-xs:  320px;
  --breakpoint-sm:  576px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  992px;
  --breakpoint-xl:  1200px;
  --breakpoint-2xl: 1400px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* ----------------------------------------------------------
     TRANSICIONES
     ---------------------------------------------------------- */
  --transition-fast:   0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow:   0.5s ease-in-out;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
}