/**
 * ECOSMART TRANSPORT — Design System · variables.css
 * Tokens de diseño: Premium Dark · Azul/Cyan (diferenciación vs Delivery naranja)
 */

:root {
  /* ── PALETA BASE ──────────────────────────────────────── */
  --void:       #080808;
  --dark-1:     #0f0f0f;
  --dark-2:     #161616;
  --dark-3:     #1e1e1e;
  --dark-4:     #272727;
  --dark-5:     #333333;
  --dark-6:     #404040;

  /* ── AZUL PRIMARIO (Transport) ───────────────────────── */
  --primary:       #3498db;
  --primary-light: #5dade2;
  --primary-dark:  #2980b9;
  --primary-10:    rgba(52,152,219,.10);
  --primary-15:    rgba(52,152,219,.15);
  --primary-20:    rgba(52,152,219,.20);

  /* ── CYAN ACENTO ─────────────────────────────────────── */
  --accent:        #1abc9c;
  --accent-light:  #48c9b0;
  --accent-dark:   #16a085;
  --accent-10:     rgba(26,188,156,.10);
  --accent-15:     rgba(26,188,156,.15);
  --accent-20:     rgba(26,188,156,.20);

  /* ── SEMÁNTICOS ───────────────────────────────────────── */
  --success:      #27ae60;
  --success-10:   rgba(39,174,96,.10);
  --success-20:   rgba(39,174,96,.20);
  --danger:       #e74c3c;
  --danger-10:    rgba(231,76,60,.10);
  --danger-20:    rgba(231,76,60,.20);
  --info:         #2980b9;
  --info-10:      rgba(41,128,185,.10);
  --warning:      #f39c12;
  --warning-10:   rgba(243,156,18,.10);

  /* ── TEXTO ────────────────────────────────────────────── */
  --txt-1:  #f5f5f5;
  --txt-2:  #c8c8c8;
  --txt-3:  #8a8a8a;
  --txt-4:  #555555;
  --txt-5:  #3a3a3a;

  /* ── BORDES ───────────────────────────────────────────── */
  --border-1: #1f1f1f;
  --border-2: #2a2a2a;
  --border-3: #353535;

  /* ── SOMBRAS ──────────────────────────────────────────── */
  --sh-xs:      0 1px 4px rgba(0,0,0,.3);
  --sh-sm:      0 2px 8px rgba(0,0,0,.4);
  --sh-md:      0 8px 24px rgba(0,0,0,.5);
  --sh-lg:      0 16px 48px rgba(0,0,0,.6);
  --sh-primary: 0 8px 32px rgba(52,152,219,.25);
  --sh-accent:  0 8px 32px rgba(26,188,156,.20);

  /* ── RADIOS ───────────────────────────────────────────── */
  --r4:   4px;  --r6:   6px;  --r8:   8px;
  --r10:  10px; --r12:  12px; --r14:  14px;
  --r16:  16px; --r20:  20px; --r24:  24px;
  --r32:  32px; --r99:  99px;

  /* ── TIPOGRAFÍA ───────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── TRANSICIONES ─────────────────────────────────────── */
  --tr-fast:   .15s ease;
  --tr-base:   .25s ease;
  --tr-slow:   .4s cubic-bezier(.16,1,.3,1);

  /* ── ESPACIADO ────────────────────────────────────────── */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem;
  --sp-4: 1rem;  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --nav-h:     58px;
  --header-h:  52px;
}