/* ============================================================
   DESIGN TOKENS — única fuente de verdad visual
   Editar aquí propaga cambios a toda la app.
   ============================================================ */

:root {
  /* --- Paleta principal --- */
  --color-primary:       #2563EB;   /* azul viajero */
  --color-primary-dark:  #1D4ED8;
  --color-primary-light: #DBEAFE;

  --color-accent:        #F59E0B;   /* naranja destino */
  --color-accent-dark:   #D97706;

  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #3B82F6;

  /* --- Neutros --- */
  --color-white:         #FFFFFF;
  --color-bg:            #F8FAFC;
  --color-bg-alt:        #F1F5F9;
  --color-surface:       #FFFFFF;
  --color-border:        #E2E8F0;
  --color-text:          #1E293B;
  --color-text-muted:    #64748B;
  --color-text-light:    #94A3B8;

  /* --- Tipografía --- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'Fira Code', 'Courier New', monospace;

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

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* --- Espaciado (escala 4px) --- */
  --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 */

  /* --- Layout --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* --- Bordes y radios --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-index layers --- */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
}