/**
 * DESIGN SYSTEM TOKENS — JACK ALVARADO
 * Dirección de Arte: Editorial premium
 * Navy Profundo + Marfil + Degradado Violeta→Azul
 */

:root {
  /* ==========================================================================
     PALETA DE COLOR
     ========================================================================== */

  /* Autoridad */
  --color-navy:         #0A1A47;
  --color-navy-dark:    #050F2E;
  --color-navy-deep:    #142C6B;
  --color-navy-surface: #0F2258;

  /* Degradado de Firma (Violeta → Azul) */
  --color-violet:       #D9B872;  /* dorado champán */
  --color-violet-deep:  #B8934A;  /* dorado profundo */
  --color-blue-bright:  #E5CD96;  /* champán claro */
  --color-blue-soft:    #F0E3C0;  /* champán muy claro */
  --gradient-signature: linear-gradient(120deg, #FFFFFF 0%, #F0E3C0 45%, #D9B872 100%);
  --gradient-signature-soft: linear-gradient(120deg, rgba(217, 184, 114, 0.12), rgba(240, 227, 192, 0.08));
  --gradient-signature-glow: 0 20px 60px -20px rgba(184, 147, 74, 0.45);

  /* Compat (variables antiguas apuntan al nuevo lenguaje) */
  --color-cyan:         var(--color-blue-bright);
  --color-cyan-hover:   #C9A45C;
  --color-cyan-light:   #EEF1FF;
  --color-cyan-soft:    rgba(217, 184, 114, 0.12);
  --color-cyan-glow:    rgba(184, 147, 74, 0.35);

  /* Fondos */
  --color-white:        #FFFFFF;
  --color-ivory:        #F7F5EE;
  --color-sand-soft:    #EFEBE0;

  /* Texto */
  --color-carbon:       #0F172A;
  --color-charcoal:     #1F2937;
  --color-gray-warm:    #4B5566;
  --color-gray-mid:     #6B7280;
  --color-gray-light:   #9CA3AF;
  --color-border-subtle:rgba(10, 26, 71, 0.08);
  --color-border-ivory: rgba(10, 26, 71, 0.10);

  /* Sobre Navy */
  --color-text-on-navy:       #FFFFFF;
  --color-text-on-navy-muted: #EAEFF8;
  --color-text-on-navy-dim:   #B9C2D6;
  --color-border-navy:        rgba(255, 255, 255, 0.10);
  --color-border-cyan:        rgba(217, 184, 114, 0.35);

  /* Asignaciones base */
  --color-bg:      var(--color-white);
  --color-surface: var(--color-ivory);
  --color-text:    var(--color-carbon);
  --color-text-muted: var(--color-gray-warm);
  --color-accent:  var(--color-violet);

  /* ==========================================================================
     TIPOGRAFÍA — ESCALA CONTENIDA & PREMIUM
     ========================================================================== */
  --font-editorial: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-display:   'Playfair Display', Georgia, serif;
  --font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:      var(--font-sans);

  /* Escala tipográfica refinada (reducida ~30% desde la anterior) */
  --font-size-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12 – 13 */
  --font-size-sm:   clamp(0.85rem, 0.82rem + 0.2vw, 0.9375rem);    /* 14 – 15 */
  --font-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16 – 17 */
  --font-size-md:   clamp(1.075rem, 1.04rem + 0.2vw, 1.175rem);    /* 17 – 19 */
  --font-size-lg:   clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);      /* 20 – 24 */
  --font-size-xl:   clamp(1.5rem, 1.38rem + 0.6vw, 1.9rem);        /* 24 – 30 */
  --font-size-2xl:  clamp(1.85rem, 1.65rem + 1vw, 2.4rem);         /* 30 – 38 */
  --font-size-3xl:  clamp(2.25rem, 1.95rem + 1.4vw, 3rem);         /* 36 – 48 */
  --font-size-4xl:  clamp(2.75rem, 2.35rem + 1.8vw, 3.75rem);      /* 44 – 60 */
  --font-size-hero: clamp(3rem, 2.5rem + 2.3vw, 4.5rem);           /* 48 – 72 */
  --font-size-monumental: clamp(3.25rem, 2.7rem + 2.8vw, 5.25rem); /* 52 – 84 */

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

  --line-height-tight:   1.06;
  --line-height-snug:    1.22;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  /* ==========================================================================
     ESPACIADO
     ========================================================================== */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;
  --space-4xl: 7rem;
  --space-5xl: 9rem;

  /* ==========================================================================
     RADIOS Y FORMAS
     ========================================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ==========================================================================
     SOMBRAS
     ========================================================================== */
  --shadow-subtle:   0 2px 12px rgba(10, 26, 71, 0.05);
  --shadow-paper:    0 12px 40px -12px rgba(10, 26, 71, 0.15), 0 2px 8px rgba(10, 26, 71, 0.04);
  --shadow-elevated: 0 24px 60px -20px rgba(10, 26, 71, 0.22), 0 4px 12px rgba(10, 26, 71, 0.06);
  --shadow-navy:     0 30px 80px -20px rgba(5, 15, 46, 0.55);
  --shadow-cyan:     0 14px 34px -8px rgba(184, 147, 74, 0.40);
  --shadow-signature: var(--gradient-signature-glow);

  /* Transiciones */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal:0.35s var(--ease-out-expo);
  --transition-quick: 0.2s var(--ease-out-expo);

  /* Contenedores */
  --container-reading: 780px;
  --container-md:      1000px;
  --container-lg:      1200px;
  --container-xl:      1360px;

  /* ==========================================================================
     ALIASES DE COMPATIBILIDAD (páginas legacy)
     ========================================================================== */
  --color-night:                 var(--color-navy);
  --color-border:                var(--color-border-subtle);
  --color-border-night:          var(--color-border-navy);
  --color-border-sand:           var(--color-border-ivory);
  --color-text-dim:              var(--color-gray-mid);
  --color-text-on-night-dim:     var(--color-text-on-navy-dim);
  --color-text-on-night-muted:   var(--color-text-on-navy-muted);
  --color-warm-gray:             var(--color-gray-warm);
  --shadow-night:                var(--shadow-navy);
}