/**
 * AUTOMOTORES ARGENTINOS — Design Tokens v2.0
 * Tema CLARO: blanco predominante, azul y gris como acentos
 */

:root {

  /* ── COLORES DE FONDO ─────────────────────────────────────── */
  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F4F6F9;
  --color-bg-tertiary:   #EBF0F7;

  /* ── SUPERFICIES ──────────────────────────────────────────── */
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F0F4F8;
  --color-surface-3:     #E4ECF5;

  /* ── TEXTO ────────────────────────────────────────────────── */
  --color-text:          #111827;
  --color-text-secondary:#374151;
  --color-text-muted:    #6B7280;
  --color-text-inverse:  #FFFFFF;

  /* ── BORDES ───────────────────────────────────────────────── */
  --color-border:        #D1D5DB;
  --color-border-light:  #E5E7EB;
  --color-border-strong: #9CA3AF;

  /* ── ACENTO AZUL (institucional) ──────────────────────────── */
  --color-accent:        #1B5DB5;
  --color-accent-hover:  #1449A0;
  --color-accent-light:  #2563EB;
  --color-accent-subtle: #EFF6FF;
  --color-accent-border: #BFDBFE;
  --shadow-accent:       0 4px 20px rgba(27,93,181,0.25);

  /* ── ROJO (DFSK secundario) ───────────────────────────────── */
  --color-red:           #DC2626;
  --color-red-subtle:    #FEF2F2;

  /* ── BADGES ───────────────────────────────────────────────── */
  --color-badge-0km:     #16a34a;
  --color-badge-0km-bg:  #f0fdf4;
  --color-badge-conv:    #d97706;
  --color-badge-conv-bg: #fffbeb;
  --color-badge-brand:   #1B5DB5;

  /* ── BOTONES ──────────────────────────────────────────────── */
  --color-btn-primary:        #1B5DB5;
  --color-btn-whatsapp:       #25D366;
  --color-btn-whatsapp-hover: #128C7E;

  /* ── HEADER (fondo blanco, texto oscuro) ──────────────────── */
  --color-header-bg:     #FFFFFF;
  --color-header-border: #E5E7EB;
  --color-header-text:   #111827;

  /* ── FOOTER (oscuro) ──────────────────────────────────────── */
  --color-footer-bg:     #111827;
  --color-footer-text:   #D1D5DB;
  --color-footer-muted:  #6B7280;

  /* ── HERO (texto siempre blanco sobre imagen) ─────────────── */
  --color-hero-text:     #FFFFFF;

  /* ── TIPOGRAFÍA ───────────────────────────────────────────── */
  --font-primary:   'Barlow', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ── RADIO ────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ──────────────────────────────────────────────── */
  --shadow-xs:        0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.11);
  --shadow-xl:        0 16px 48px rgba(0,0,0,0.13);
  --shadow-card:      0 2px 12px rgba(0,0,0,0.07);
  --shadow-card-hover:0 8px 32px rgba(27,93,181,0.14);

  /* ── TRANSICIONES ─────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-INDEX ──────────────────────────────────────────────── */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-px:  var(--space-6);
  --header-h:      68px;
  --section-py:    var(--space-20);
}