/**
 * DESIGN SYSTEM - TERMINAL DE TRANSPORTES
 * Paleta institucional, variables globales, tipografía y tokens de diseño.
 */

:root {
  /* ── 1. Colores Institucionales ── */
  --brand-green: #6aaf11;
  --brand-green-dark: #528a0a;
  --brand-green-light: #f2f9e9;
  --brand-green-100: #e3f4ce;
  --brand-green-glow: rgba(106, 175, 17, 0.25);

  --brand-orange: #fc8512;
  --brand-orange-dark: #e07005;
  --brand-orange-light: #fff5eb;
  --brand-orange-glow: rgba(252, 133, 18, 0.25);

  --brand-blue: #019ae3;
  --brand-blue-dark: #007bb8;
  --brand-blue-light: #e6f6fd;

  /* ── 2. Colores Neutros y Superficies ── */
  --color-dark-900: #0f172a;
  --color-dark-800: #1e293b;
  --color-dark-700: #334155;
  --color-gray-500: #64748b;
  --color-gray-400: #94a3b8;
  --color-gray-200: #e2e8f0;
  --color-gray-100: #f1f5f9;
  --color-gray-50:  #f8fafc;
  --color-white:    #ffffff;

  /* Semánticos */
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;

  /* ── 3. Tipografía (Inter + Plus Jakarta Sans) ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

  /* ── 4. Sombras Suaves (Elegantes, no toscas) ── */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03);

  /* ── 5. Radios de Borde ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ── 6. Contenedores ── */
  --max-w-container: 1240px;
  --max-w-narrow: 980px;
}