/* ============================================================
   2 Amigos + Hijos Aberturas — Design Tokens
   Fuente: 2amigos-DESIGN.md v1.1 — Mayo 2026
   ============================================================ */

:root {

  /* ── COLORES PRIMARIOS ─────────────────────────────────── */
  --color-black:        #111111;
  --color-white:        #ffffff;
  --color-blue-primary: #0d1f4f;
  --color-blue-hover:   #1B3A6B;
  --color-blue-light:   #E8EEF7;

  /* ── COLORES NEUTROS ───────────────────────────────────── */
  --color-gray-100: #f8f7f5;
  --color-gray-200: #e8e8e8;
  --color-gray-400: #999999;
  --color-gray-600: #555555;
  --color-gray-800: #222222;

  /* ── COLORES SEMÁNTICOS ────────────────────────────────── */
  --color-success:   #1a6b3a;
  --color-error:     #9b1c1c;
  --color-amber:     #F59E0B; /* solo para estrellas de reseñas */
  --color-whatsapp:  #25D366; /* verde oficial WhatsApp */

  /* ── TIPOGRAFÍA ────────────────────────────────────────── */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Outfit', sans-serif;

  /* Escala display — Montserrat */
  --text-hero: clamp(48px, 6vw, 80px);
  --text-h1:   clamp(36px, 4.5vw, 60px);
  --text-h2:   clamp(28px, 3.5vw, 44px);
  --text-h3:   clamp(20px, 2.5vw, 30px);

  /* Escala body — Outfit */
  --text-lead:  clamp(16px, 1.8vw, 20px);
  --text-body:  16px;
  --text-small: 14px;
  --text-label: 12px;
  --text-meta:  11px;

  /* ── ESPACIADO — base 8px ──────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ── GRID ──────────────────────────────────────────────── */
  --grid-max:     1280px;
  --grid-padding: clamp(16px, 4vw, 80px);
  --grid-cols:    12;
  --grid-gap:     24px;

  /* ── BORDES Y RADIOS ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --border-color:       #e8e8e8;
  --border-color-hover: #999999;
  --border-width:       1px;
  --border-style:       solid;

  /* ── SOMBRAS ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* ── MOTION ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-xslow: 600ms;

  /* ── Z-INDEX ───────────────────────────────────────────── */
  --z-topbar:  100;
  --z-navbar:  90;
  --z-overlay: 200;
  --z-modal:   300;
}