/* ==========================================================================
   Variables CSS globales — EconoViajes
   Fuente: docs/DESIGN_SYSTEM.md
   ========================================================================== */

:root {
  /* Color — principal / secundario / acento */
  --primary: #A5799D;
  --primary-light: #CAAFC5;
  --primary-dark: #905A86;

  --secondary: #9AC1AC;
  --secondary-light: #C8DAD1;
  --secondary-dark: #57A87D;

  --accent: #FFC857;
  --accent-pink: #F3B6CC;
  --accent-pink-dark: #DE8FAE;

  /* Color — estado */
  --success: #28C76F;
  --warning: #FF9F43;
  --danger: #EA5455;

  /* Color — neutros */
  --white: #FFFFFF;
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-500: #6C757D;
  --gray-700: #495057;
  --gray-900: #212529;

  --text-color: #2F3542;
  --background: #FFFFFF;

  /* Tipografía */
  --font-primary: 'Roboto', Arial, Helvetica, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-nav: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-mono: Consolas, monospace;

  /* Espaciado (escala en múltiplos de 8) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Bordes redondeados */
  --radius-button: 2rem;
  --radius-input: 2rem;
  --radius-card: 1.5rem;
  --radius-image: 1.5rem;

  /* Sombras */
  --shadow-soft: 0 10px 30px rgba(222, 143, 174, .10);
  --shadow-hover: 0 15px 40px rgba(222, 143, 174, .18);

  /* Transiciones */
  --transition-base: all .35s cubic-bezier(.34, 1.56, .64, 1);
  --transition-fast: all .15s ease-out;
  --transition-reveal: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);

  /* Contenedor principal */
  --container-max-width: 1200px;
  --container-padding: 24px;
}

/* ==========================================================================
   Breakpoints de referencia (DESIGN_SYSTEM.md)
   Las custom properties no son válidas dentro de @media, por lo que estos
   valores se usan de forma literal en responsive.css y en cada componente.

     Small   (Mobile,  base mobile-first): min-width 300px
     Medium  (Tablet):                     min-width 600px
     Large   (Laptop):                     min-width 992px
     Extra Large (Desktop):                min-width 1200px
   ========================================================================== */