/* ============================================================
   TOKENS DE DISEÑO — Autocares CANITO
   Colores corporativos: Azul #004394 + Amarillo #ffd800
   ============================================================ */
:root {
  /* ── Colores corporativos ─────────────────────────────────── */
  --color-primary:        hsl(218, 100%, 29%);   /* #004394 */
  --color-primary-dark:   hsl(218, 100%, 19%);   /* #002d63 */
  --color-primary-light:  hsl(218, 100%, 37%);   /* #0057bc */
  --color-accent:         hsl(50, 100%, 50%);    /* #ffd800 */
  --color-accent-dark:    hsl(50, 100%, 42%);    /* #d4b400 */
  --color-accent-light:   hsl(50, 100%, 58%);    /* #ffdf33 */

  /* ── Fondos y superficies ─────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-surface:        #f4f6fa;
  --color-surface-alt:    #edf0f7;
  --color-dark:           hsl(218, 100%, 10%);   /* #001933 */
  --color-dark-alt:       hsl(218, 50%, 15%);

  /* ── Texto ───────────────────────────────────────────────── */
  --color-text:           hsl(230, 25%, 14%);    /* #1a1d2e */
  --color-text-muted:     hsl(220, 15%, 45%);    /* #636d8c */
  --color-text-light:     hsl(220, 10%, 62%);
  --color-text-inverted:  #ffffff;

  /* ── Gradientes ──────────────────────────────────────────── */
  --gradient-primary:     linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-hero:        linear-gradient(180deg, rgba(0,40,100,0.75) 0%, rgba(0,20,60,0.55) 60%, rgba(0,10,40,0.70) 100%);
  --gradient-accent:      linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  --gradient-surface:     linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  --gradient-dark:        linear-gradient(135deg, var(--color-dark), var(--color-primary-dark));

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display:  'Montserrat', sans-serif;
  --font-body:     'Lato', sans-serif;

  --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 */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.65;

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

  /* ── Bordes y radios ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0, 45, 100, 0.08);
  --shadow-md:     0 4px 16px rgba(0, 45, 100, 0.12);
  --shadow-lg:     0 8px 32px rgba(0, 45, 100, 0.16);
  --shadow-xl:     0 16px 64px rgba(0, 45, 100, 0.20);
  --shadow-accent: 0 6px 20px rgba(255, 216, 0, 0.40);
  --shadow-card:   0 2px 8px rgba(0, 45, 100, 0.08), 0 8px 24px rgba(0, 45, 100, 0.08);

  /* ── Animaciones ─────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --section-padding:   var(--space-24);
  --header-height:     88px;

  /* Breakpoints (referencia — usar en media queries)
     mobile:  < 768px
     tablet:  768px – 1024px
     desktop: > 1024px
     wide:    > 1440px  */
}