/* ============================================================
   DESIGN SYSTEM — PISCIOTTI GÓMEZ ABOGADOS
   variables.css — Fuente de verdad de todos los tokens visuales
   Actualizado: Mayo 2026
   ============================================================ */

:root {

  /* ── PALETA DE COLORES ─────────────────────────────────── */

  /* Principal — Azul Marino (confianza, autoridad) */
  --color-navy:          #10233F;
  --color-navy-dark:     #0a1628;
  --color-navy-mid:      #0d1d33;
  --color-navy-light:    #1a365f;

  /* Acento — Dorado (éxito, distinción) */
  --color-gold:          #D0A95C;
  --color-gold-light:    #e0c082;
  --color-gold-muted:    rgba(208, 169, 92, 0.15);
  --color-gold-border:   rgba(208, 169, 92, 0.30);

  /* Fondos */
  --color-bg-white:      #FFFFFF;
  --color-bg-soft:       #F4F6FA;
  --color-bg-blue:       #EEF3FA;
  --color-bg-dark:       #0d2247;

  /* Textos */
  --color-text-dark:     #313741;
  --color-text-mid:      #6B6B6B;
  --color-text-light:    rgba(255, 255, 255, 0.75);
  --color-text-white:    #FFFFFF;
  --color-text-gold:     #D0A95C;

  /* Bordes */
  --color-border:        #E8EEF8;
  --color-border-light:  rgba(255, 255, 255, 0.12);

  /* Estados y utilidades */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #20b858;
  --color-success:       #16a34a;
  --color-error:         #dc2626;
  --color-warning:       #d97706;


  /* ── TIPOGRAFÍA ────────────────────────────────────────── */

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala de tamaños */
  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     17px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;

  /* Títulos con clamp (responsive fluido) */
  --text-h1:     clamp(34px, 5vw, 54px);
  --text-h2:     clamp(28px, 4vw, 40px);
  --text-h3:     clamp(20px, 2.5vw, 26px);

  /* Pesos */
  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;

  /* Interlineado */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  /* Espaciado entre letras */
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;


  /* ── ESPACIADO (base 4px) ──────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Padding de sección estándar */
  --section-padding: 90px 0;
  --section-padding-sm: 60px 0;


  /* ── RADIOS DE BORDE ───────────────────────────────────── */

  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-full: 9999px;


  /* ── SOMBRAS ───────────────────────────────────────────── */

  --shadow-sm:    0 2px 8px rgba(27, 58, 107, 0.06);
  --shadow:       0 4px 24px rgba(27, 58, 107, 0.10);
  --shadow-md:    0 6px 28px rgba(27, 58, 107, 0.14);
  --shadow-hover: 0 8px 36px rgba(27, 58, 107, 0.18);
  --shadow-gold:  0 4px 20px rgba(201, 168, 76, 0.40);


  /* ── TRANSICIONES ──────────────────────────────────────── */

  --transition-fast:   all 0.15s ease;
  --transition:        all 0.25s ease;
  --transition-slow:   all 0.40s ease;


  /* ── Z-INDEX ───────────────────────────────────────────── */

  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-float:   200;
  --z-modal:   300;


  /* ── LAYOUT ────────────────────────────────────────────── */

  --container-max:  1100px;
  --container-pad:  24px;
  --nav-height:     68px;

}


/* ── BREAKPOINTS (documentados — usar en media queries) ──────
   Mobile:  max-width: 480px
   Tablet:  max-width: 768px
   Laptop:  max-width: 1024px
   Desktop: max-width: 1100px
   ────────────────────────────────────────────────────────── */