/* ============================================================
   ASA TRANSPORTES — Variables CSS
   Design tokens centralizados
   ============================================================ */

:root {
  /* ── Paleta de Cores ── */
  --color-azul-900:     #050d1a;   /* Mais escuro — backgrounds profundos */
  --color-azul-800:     #0a1628;   /* Fundo principal escuro */
  --color-azul-700:     #0d1f3c;   /* Variação de seções */
  --color-azul-600:     #0d2456;   /* Backgrounds de seções intermediárias */
  --color-azul-500:     #1a3a8f;   /* Gradientes e destaques */
  --color-azul-400:     #2563eb;   /* Acentos, bordas */
  --color-azul-300:     #3b82f6;   /* Links e ícones */
  --color-azul-200:     #93c5fd;   /* Azul claro, subtítulos */
  --color-azul-100:     #dbeafe;   /* Azul muito claro */

  --color-branco:       #ffffff;
  --color-branco-90:    rgba(255, 255, 255, 0.9);
  --color-branco-80:    rgba(255, 255, 255, 0.8);
  --color-branco-60:    rgba(255, 255, 255, 0.6);
  --color-branco-10:    rgba(255, 255, 255, 0.1);
  --color-branco-05:    rgba(255, 255, 255, 0.05);

  --color-preto:        #000000;
  --color-cinza-900:    #111827;
  --color-cinza-800:    #1f2937;
  --color-cinza-700:    #374151;
  --color-cinza-500:    #6b7280;
  --color-cinza-300:    #d1d5db;
  --color-cinza-100:    #f3f4f6;
  --color-cinza-50:     #f8fafc;

  --color-verde-wa:     #25d366;   /* WhatsApp verde */
  --color-verde-wa-dark:#1da851;   /* WhatsApp hover */
  --color-amarelo:      #f59e0b;   /* Destaque amarelo/dourado */
  --color-vermelho:     #ef4444;   /* Erros */
  --color-sucesso:      #22c55e;   /* Sucesso */

  /* ── Gradientes ── */
  --gradient-hero:      linear-gradient(135deg, #050d1a 0%, #0a1f4e 50%, #0d2456 100%);
  --gradient-azul:      linear-gradient(135deg, #0a1628 0%, #1a3a8f 100%);
  --gradient-card:      linear-gradient(135deg, #0d2456 0%, #1a3a8f 100%);
  --gradient-cta:       linear-gradient(90deg, #0a1628 0%, #1a3a8f 100%);
  --gradient-overlay:   linear-gradient(to right, rgba(5,13,26,0.98) 0%, rgba(10,22,40,0.85) 50%, rgba(10,22,40,0.3) 100%);
  --gradient-white:     linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

  /* ── Tipografia ── */
  --font-primary:       'Barlow', 'Inter', system-ui, -apple-system, sans-serif;
  --font-secondary:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', 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 */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;
  --font-black:    900;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Espaçamentos ── */
  --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 */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Bordas ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:    0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl:   0 25px 50px rgba(0,0,0,0.25);
  --shadow-blue:  0 8px 32px rgba(37, 99, 235, 0.3);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.12);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── Transições ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --container-max:   1200px;
  --container-wide:  1400px;
  --container-narrow: 960px;
  --header-height:   80px;
  --section-py:      var(--space-20);
  --section-py-sm:   var(--space-12);

  /* ── Z-Index ── */
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:      1000;
}

/* ── Breakpoints de referência (para comentários em media queries) ──
   xs:  < 480px
   sm:  ≥ 480px
   md:  ≥ 768px
   lg:  ≥ 1024px
   xl:  ≥ 1280px
   2xl: ≥ 1400px
*/