/* ============================================================
   C&L COMERCIAL E INVERSIONES — DESIGN TOKENS
   tokens.css — Diseño industrial auténtico
   ============================================================ */

:root {
  /* ── Paleta Primaria Industrial ────────────────────────── */
  --primary:       #112036;
  --primary-dark:  #0b1622;
  --primary-light: #1d3558;

  /* ── Acento: naranja-teja industrial */
  --accent:        #e07b2f;
  --accent-hover:  #c4641a;
  --accent-light:  #f59455;
  --accent-glow:   rgba(224, 123, 47, 0.2);

  /* ── Textos ─────────────────────────────────────────────── */
  --text-dark:     #1a2535;
  --text-body:     #374151;
  --text-muted:    #6b7280;
  --text-light:    #f5f6f8;

  /* ── Fondos y Superficies ───────────────────────────────── */
  --bg-light:      #f6f5f2;
  --bg-alt:        #edecea;
  --bg-card:       #ffffff;
  --border-color:  #dad6cf;
  --border-strong: #bfbab2;

  /* ── Estado ─────────────────────────────────────────────── */
  --success:        #2d8a5e;
  --whatsapp:       #25D366;
  --whatsapp-hover: #1eba59;

  /* ── Geometría — formas técnicas, no redondas de SaaS ───── */
  --radius-btn:    5px;
  --radius-eyebrow:2px;
  --radius:        5px;
  --radius-sm:     3px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(17, 32, 54, 0.06);
  --shadow:     0 3px 12px rgba(17, 32, 54, 0.09), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 28px rgba(17, 32, 54, 0.13), 0 3px 8px rgba(0,0,0,0.05);

  /* ── Transición ─────────────────────────────────────────── */
  --transition: all 0.18s ease;
}