/**
 * ECOSMART DELIVERY — Design System · variables.css
 * Tokens de diseño: colores, tipografía, espaciado, sombras
 * Estilo: Premium Dark · Naranja + Dorado
 */

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

  /* ── NARANJA PRIMARIO ─────────────────────────────────── */
  --orange:       #e67e22;
  --orange-light: #f39c12;
  --orange-dark:  #d35400;
  --orange-10:    rgba(230,126,34,.10);
  --orange-15:    rgba(230,126,34,.15);
  --orange-20:    rgba(230,126,34,.20);

  /* ── DORADO ───────────────────────────────────────────── */
  --gold:         #c9971c;
  --gold-light:   #e2ab20;
  --gold-dark:    #a07816;
  --gold-10:      rgba(201,151,28,.10);
  --gold-15:      rgba(201,151,28,.15);
  --gold-20:      rgba(201,151,28,.20);
  --gold-border:  rgba(201,151,28,.25);

  /* ── 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-xl:     0 24px 64px rgba(0,0,0,.7);
  --sh-orange: 0 8px 32px rgba(230,126,34,.25);
  --sh-gold:   0 8px 32px rgba(201,151,28,.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 ───────────────────────────────────────────── */
  --sidebar-w:   240px;
  --max-mobile:  480px;
  --nav-h:       58px;
  --header-h:    52px;
  --hdr-h:       58px;

  /* ══════════════════════════════════════════════════════
     ALIASES CORTOS — para compatibilidad con cocina.css
     (nombres usados internamente en el sistema delivery)
  ══════════════════════════════════════════════════════ */

  /* Fondo oscuro */
  --d1: #0f0f0f;
  --d2: #161616;
  --d3: #1e1e1e;
  --d4: #272727;
  --d5: #333333;

  /* Bordes */
  --b1: #1f1f1f;
  --b2: #2a2a2a;
  --b3: #353535;

  /* Texto */
  --t1: #f5f5f5;
  --t2: #c8c8c8;
  --t3: #8a8a8a;
  --t4: #555555;

  /* Tipografía */
  --display: 'Playfair Display', Georgia, serif;
  --body:    'DM Sans', system-ui, sans-serif;

  /* Transición */
  --tr: .25s ease;

  /* Hover states */
  --orange-h: #d35400;
  --gold-h:   #a07816;

  /* Tints cortos */
  --o10: rgba(230,126,34,.10);
  --g10: rgba(201,151,28,.10);
  --gborder: rgba(201,151,28,.25);
  --s10: rgba(39,174,96,.10);
  --s20: rgba(39,174,96,.20);
  --r-tint: rgba(231,76,60,.10);
  --w10: rgba(243,156,18,.10);
  --i10: rgba(41,128,185,.10);

  /* Colores semánticos cortos */
  --green: #27ae60;
  --red:   #e74c3c;
  --warn:  #f39c12;
  --blue:  #2980b9;
}