/* ============================================================
   PWA Capital Group — Design Tokens
   Sistema de variables CSS centralizado
   ============================================================ */

:root {
  /* --- Paleta principal --- */
  --color-navy:         #071B2E;
  --color-navy-dark:    #0B2437;
  --color-gold:         #C9A646;
  --color-gold-light:   #D6B56D;
  --color-ivory:        #F8F6F1;
  --color-carbon:       #111827;
  --color-gray:         #5B6472;
  --color-gray-light:   #9CA3AF;
  --color-green:        #16A34A;
  --color-red:          #DC2626;
  --color-white:        #FFFFFF;

  /* --- Colores semánticos --- */
  --color-bg-primary:   var(--color-navy);
  --color-bg-secondary: var(--color-navy-dark);
  --color-bg-light:     var(--color-ivory);
  --color-text-primary: var(--color-carbon);
  --color-text-light:   var(--color-ivory);
  --color-text-muted:   var(--color-gray);
  --color-accent:       var(--color-gold);
  --color-accent-light: var(--color-gold-light);

  /* --- Tipografías --- */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Escala tipográfica --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

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

  /* --- Espaciados --- */
  --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;
  --space-32: 8rem;

  /* --- Contenedor --- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* --- Bordes y radios --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px 0 rgba(0,0,0,.12);
  --shadow-lg:  0 8px 30px 0 rgba(0,0,0,.18);
  --shadow-xl:  0 20px 60px 0 rgba(0,0,0,.24);
  --shadow-gold: 0 4px 20px rgba(201,166,70,.2);

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms ease;

  /* --- Z-index --- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-ticker:  110;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* --- Ticker --- */
  --ticker-h: 36px;
  --header-h: 76px;
}