/* ===== Design Tokens – Amorismo ===== */
/* Single source of truth for colors, fonts, spacing, radii, shadows        */
/* Theming: body[data-vol="1|2|3"] remaps --am-home-* to each Vol's palette */

:root {
  /* Fuentes */
  --am-font-sans: 'Inter', system-ui, sans-serif;
  --am-font-title: 'Fredoka', sans-serif;

  /* ── Vol I – Paleta Roja (Burdeos) ── */
  /* Fuente: manual1_page2.png */
  --am-v1-principal: #6A0018;
  --am-v1-secundario: #8B1030;
  --am-v1-fondo-oscuro: #3A0010;
  --am-v1-texto: #F5F4EF;
  --am-v1-elemento-01: #DAD7D4;
  --am-v1-elemento-02: #D98A95;

  /* ── Vol II – Paleta Blanca (Editorial) ── */
  /* Fuente: manual2_page2.png */
  --am-v2-fondo: #F5F4EF;
  --am-v2-acento: #A71921;
  --am-v2-subtitulo: #777777;
  --am-v2-parrafo: #2B2B2B;

  /* ── Vol III – Paleta Verde ── */
  /* Fuente: manual3_page2.png */
  --am-v3-principal: #0F3D22;
  --am-v3-secundario: #1E5A35;
  --am-v3-fondo-oscuro: #08130C;
  --am-v3-texto: #F5F4EF;
  --am-v3-texto-secundario: #B8C0B8;
  --am-v3-acento: #7FAF72;

  /* ── Vol IV – Paleta Azul Profundo ── */
  --am-v4-principal: #0F2440;
  --am-v4-secundario: #1E3A5F;
  --am-v4-fondo-oscuro: #0A1628;
  --am-v4-texto: #F5F4EF;
  --am-v4-texto-secundario: #A0B8D0;
  --am-v4-acento: #5A8AB5;

  /* ── Home – Tokens Semánticos ── */
  /* Fuente: docs/home_reference.png — derivados de las 3 paletas */
  --am-home-bg: #0A0A0A;                     /* fondo global oscuro (neutro) */
  --am-home-surface: #141414;                 /* cards / secciones elevadas */
  --am-home-text: var(--am-v1-texto);         /* crema F5F4EF – lectura principal */
  --am-home-text-muted: var(--am-v2-subtitulo); /* gris 777 – subtítulos */
  --am-home-accent: var(--am-v2-acento);      /* rojo A71921 – CTAs, links */
  --am-home-accent-soft: var(--am-v1-elemento-02); /* rosa D98A95 – hover, detalles */
  --am-statement-highlight: rgba(167, 25, 33, 0.35);
  --am-statement-body-muted: rgba(245, 244, 239, 0.7);
  --am-on-accent: var(--am-v1-texto);
  --am-home-quote-bg: #1A1A1A;               /* bloque cita, ligeramente elevado */
  --am-home-border: rgba(245, 244, 239, 0.1); /* bordes sutiles sobre oscuro */
  --am-nav-bg: rgba(10, 10, 10, 0.88);
  --am-nav-hover-bg: rgba(245, 244, 239, 0.06);
  --am-nav-active-bg: rgba(167, 25, 33, 0.12);
  --am-nav-active-text: var(--am-home-accent-soft);
  --am-control-focus-bg: rgba(167, 25, 33, 0.05);
  --am-cta-hover-bg: var(--am-v1-secundario);
  --am-feedback-success: var(--am-v3-acento);
  --am-input-placeholder: var(--am-home-text);
  --am-noise-opacity: 0;

  /* ── Semantic aliases for home-only quote/highlight colors ── */
  --am-hl-green:     var(--am-v3-acento);       /* .am-hl--no keyword */
  --am-quote-pink:   var(--am-v1-elemento-02);   /* featured + v2 quotes */
  --am-quote-green:  var(--am-v3-acento);         /* v3 quote */
  /* Logo color control: white logo → keep white on dark backgrounds */
  --am-logo-filter: brightness(1);

  /* Espaciado (escala 4px) */
  --am-sp-1: 0.25rem;
  --am-sp-2: 0.5rem;
  --am-sp-3: 0.75rem;
  --am-sp-4: 1rem;
  --am-sp-5: 1.5rem;
  --am-sp-6: 2rem;
  --am-sp-8: 4rem;

  /* Radios */
  --am-radius-sm: 8px;

  /* Sombras */
  --am-shadow-card: 0 8px 25px rgba(0, 0, 0, 0.5);
  --am-shadow-cta: 0 8px 30px rgba(167, 25, 33, 0.35);
  --am-shadow-cta-hover: 0 12px 40px rgba(167, 25, 33, 0.5);
  --am-shadow-hero: 0 10px 30px rgba(0, 0, 0, 0.5);
  --am-shadow-logo: 0 0 20px rgba(245, 244, 239, 0.2);
  --am-shadow-thumb: 0 4px 12px rgba(0, 0, 0, 0.4);
  --am-shadow-thumb-hover: 0 6px 18px rgba(0, 0, 0, 0.6);
  --am-shadow-thumb-active: 0 6px 18px rgba(167, 25, 33, 0.3);
  --am-shadow-nav-logo: 0 1px 6px rgba(0, 0, 0, 0.4);
  --am-shadow-landing-logo: 0 4px 24px rgba(0, 0, 0, 0.6);
  --am-hero-overlay-mid: rgba(10, 10, 10, 0.45);
  --am-hero-overlay-top: rgba(10, 10, 10, 0.18);
  --am-hero-vignette-mid: rgba(10, 10, 10, 0.2);
  --am-hero-vignette-edge: rgba(10, 10, 10, 0.55);
  --am-hero-fade-dense: rgba(10, 10, 10, 0.85);
  --am-hero-fade-soft: rgba(10, 10, 10, 0.3);
  --am-hero-shadow-vol1: rgba(106, 0, 24, 0.92);
  --am-hero-shadow-vol2: rgba(218, 215, 212, 0.70);
  --am-hero-shadow-vol3: rgba(15, 61, 34, 0.88);

  /* Layout */
  --am-max-w: 1180px;
  --am-nav-h: 60px;

  /* ── Gradiente de fondo (sobreescribible por Vol) ── */
  --am-bg-grad-color-a:  rgba(106, 0, 24, 0.15);  /* glow A — Vol I rojo */
  --am-bg-grad-color-b:  rgba(15, 61, 34, 0.12);  /* glow B — Vol III verde */
  --am-bg-grad-bottom:   #0d0d0d;                 /* tono final gradiente (light Vol: crema) */

  /* ── Foto de fondo ambiental (inerte por defecto, activa en Vol pages) ── */
  --am-bg-photo: none;
  --am-bg-photo-opacity: 0;
  --am-bg-photo-blend: normal;
  --am-bg-photo-size: cover;
  --am-bg-photo-blur: 3px;
  --am-bg-photo-scale: 1.03;

  /* ── Sombras de tipografía (sobreescribibles por Vol claro) ── */
  --am-heading-shadow:   rgba(245, 244, 239, 0.15);
  --am-h1-shadow:        rgba(245, 244, 239, 0.20);
}

/* ── Theming por Vol — remap de tokens semánticos ── */

/* ── Vol I – Burdeos ── */
body[data-vol="1"] {
  --am-home-bg:           var(--am-v1-fondo-oscuro);      /* #3A0010 */
  --am-home-surface:      var(--am-v1-principal);         /* #6A0018 */
  --am-home-text:         var(--am-v1-texto);             /* #F5F4EF */
  --am-home-text-muted:   var(--am-v1-elemento-01);       /* #DAD7D4 */
  --am-home-accent:       var(--am-v1-secundario);        /* #8B1030 */
  --am-home-accent-soft:  var(--am-v1-elemento-02);       /* #D98A95 */
  --am-on-accent:         var(--am-v1-texto);
  --am-home-quote-bg:     var(--am-v1-principal);         /* #6A0018 */
  --am-home-border:       rgba(218, 215, 212, 0.12);
  --am-nav-bg:            rgba(58, 0, 16, 0.94);
  --am-nav-hover-bg:      rgba(245, 244, 239, 0.08);
  --am-nav-active-bg:     rgba(139, 16, 48, 0.28);
  --am-nav-active-text:   var(--am-v1-elemento-02);
  --am-control-focus-bg:  rgba(139, 16, 48, 0.18);
  --am-cta-hover-bg:      var(--am-v1-principal);
  --am-feedback-success:  var(--am-v1-elemento-02);
  --am-input-placeholder: var(--am-v1-texto);
  --am-noise-opacity:     0;
  --am-bg-grad-color-a:   rgba(106, 0, 24, 0.35);
  --am-bg-grad-color-b:   rgba(139, 16, 48, 0.15);
  --am-bg-grad-bottom:    var(--am-v1-fondo-oscuro);
  --am-heading-shadow:    rgba(245, 244, 239, 0.15);
  --am-h1-shadow:         rgba(245, 244, 239, 0.20);
  --am-shadow-card:       0 8px 25px rgba(58, 0, 16, 0.55);
  --am-shadow-cta:        0 8px 30px rgba(139, 16, 48, 0.35);
  --am-shadow-cta-hover:  0 12px 40px rgba(106, 0, 24, 0.55);
  --am-shadow-hero:       0 10px 30px rgba(58, 0, 16, 0.55);
  --am-shadow-logo:       0 0 20px rgba(245, 244, 239, 0.20);
  --am-shadow-thumb:      0 4px 12px rgba(58, 0, 16, 0.45);
  --am-shadow-thumb-hover: 0 6px 18px rgba(58, 0, 16, 0.65);
  --am-shadow-thumb-active: 0 6px 18px rgba(139, 16, 48, 0.40);
  --am-shadow-nav-logo: 0 1px 6px rgba(58, 0, 16, 0.45);
  --am-shadow-landing-logo: 0 4px 24px rgba(58, 0, 16, 0.55);
  --am-hero-overlay-mid: rgba(58, 0, 16, 0.58);
  --am-hero-overlay-top: rgba(58, 0, 16, 0.30);
  --am-bg-photo: url("../images/hero/fondo-vol1.jpeg");
  --am-bg-photo-opacity: 0.8;
  --am-bg-photo-blend: normal;
  --am-bg-photo-blur: 6px;
}

/* ── Vol II – Editorial (paleta clara) ── */
/* Fondo crema #F5F4EF, texto oscuro #2B2B2B, acento rojo #A71921  */
body[data-vol="2"] {
  --am-home-bg:           var(--am-v2-fondo);             /* #F5F4EF crema */
  --am-home-surface:      #E8E6DE;                        /* crema ligeramente rebajada */
  --am-home-text:         var(--am-v2-parrafo);           /* #2B2B2B texto oscuro */
  --am-home-text-muted:   var(--am-v2-subtitulo);         /* #777777 subtítulos */
  --am-home-accent:       var(--am-v2-acento);            /* #A71921 rojo */
  --am-home-accent-soft:  #C83030;                        /* rojo hover */
  --am-on-accent:         var(--am-v2-fondo);
  --am-home-quote-bg:     #ECEAE2;                        /* fondo bloque cita */
  --am-home-border:       rgba(43, 43, 43, 0.12);         /* borde sutil sobre claro */
  --am-nav-bg:            rgba(245, 244, 239, 0.96);
  --am-nav-hover-bg:      rgba(43, 43, 43, 0.06);
  --am-nav-active-bg:     rgba(167, 25, 33, 0.12);
  --am-nav-active-text:   var(--am-v2-acento);
  --am-control-focus-bg:  rgba(167, 25, 33, 0.08);
  --am-cta-hover-bg:      var(--am-v2-parrafo);
  --am-feedback-success:  #1E7C3E;
  --am-input-placeholder: var(--am-v2-parrafo);
  --am-noise-filter:      none;
  --am-noise-blend:       multiply;
  --am-noise-opacity:     0.25;
  /* Light theme: invert white logo to dark gray */
  --am-logo-filter: invert(1) opacity(0.85);
  --am-bg-grad-color-a:   rgba(167, 25, 33, 0.06);
  --am-bg-grad-color-b:   rgba(43, 43, 43, 0.03);
  --am-bg-grad-bottom:    var(--am-v2-fondo);             /* no degrade a negro */
  --am-heading-shadow:    rgba(43, 43, 43, 0.08);
  --am-h1-shadow:         rgba(43, 43, 43, 0.10);
  --am-shadow-card:       0 8px 25px rgba(0, 0, 0, 0.10);
  --am-shadow-cta:        0 8px 30px rgba(167, 25, 33, 0.22);
  --am-shadow-cta-hover:  0 12px 40px rgba(43, 43, 43, 0.20);
  --am-shadow-hero:       0 10px 30px rgba(43, 43, 43, 0.18);
  --am-shadow-thumb:      0 4px 12px rgba(43, 43, 43, 0.14);
  --am-shadow-thumb-hover: 0 6px 18px rgba(43, 43, 43, 0.22);
  --am-shadow-thumb-active: 0 6px 18px rgba(167, 25, 33, 0.24);
  --am-shadow-nav-logo: 0 1px 6px rgba(43, 43, 43, 0.16);
  --am-shadow-landing-logo: 0 4px 24px rgba(43, 43, 43, 0.18);
  --am-hero-overlay-mid: rgba(245, 244, 239, 0.58);
  --am-hero-overlay-top: rgba(245, 244, 239, 0.30);
  --am-bg-photo: url("../images/hero/fondo-vol2.jpeg");
  --am-bg-photo-opacity: 0.08;
  --am-bg-photo-blend: multiply;
  --am-bg-photo-size: 100% 100%;
  --am-bg-photo-scale: 1;
}

/* ── Vol III – Verde Oscuro ── */
body[data-vol="3"] {
  --am-home-bg:           var(--am-v3-fondo-oscuro);      /* #08130C */
  --am-home-surface:      #0F2018;
  --am-home-text:         var(--am-v3-texto);             /* #F5F4EF */
  --am-home-text-muted:   var(--am-v3-texto-secundario);  /* #B8C0B8 */
  --am-home-accent:       var(--am-v3-secundario);        /* #1E5A35 */
  --am-home-accent-soft:  var(--am-v3-acento);            /* #7FAF72 */
  --am-on-accent:         var(--am-v3-texto);
  --am-home-quote-bg:     #050E08;
  --am-home-border:       rgba(127, 175, 114, 0.12);
  --am-nav-bg:            rgba(8, 19, 12, 0.94);
  --am-nav-hover-bg:      rgba(245, 244, 239, 0.06);
  --am-nav-active-bg:     rgba(127, 175, 114, 0.16);
  --am-nav-active-text:   var(--am-v3-acento);
  --am-control-focus-bg:  rgba(30, 90, 53, 0.22);
  --am-cta-hover-bg:      var(--am-v3-principal);
  --am-input-placeholder: var(--am-v3-texto);
  --am-noise-opacity:     0;
  --am-bg-grad-color-a:   rgba(15, 61, 34, 0.4);
  --am-bg-grad-color-b:   rgba(30, 90, 53, 0.2);
  --am-bg-grad-bottom:    var(--am-v3-fondo-oscuro);
  --am-heading-shadow:    rgba(127, 175, 114, 0.12);
  --am-h1-shadow:         rgba(127, 175, 114, 0.18);
  --am-shadow-card:       0 8px 25px rgba(8, 19, 12, 0.55);
  --am-shadow-cta:        0 8px 30px rgba(30, 90, 53, 0.38);
  --am-shadow-cta-hover:  0 12px 40px rgba(15, 61, 34, 0.58);
  --am-shadow-hero:       0 10px 30px rgba(8, 19, 12, 0.58);
  --am-shadow-logo:       0 0 20px rgba(127, 175, 114, 0.20);
  --am-shadow-thumb:      0 4px 12px rgba(8, 19, 12, 0.50);
  --am-shadow-thumb-hover: 0 6px 18px rgba(8, 19, 12, 0.70);
  --am-shadow-thumb-active: 0 6px 18px rgba(127, 175, 114, 0.32);
  --am-shadow-nav-logo: 0 1px 6px rgba(8, 19, 12, 0.45);
  --am-shadow-landing-logo: 0 4px 24px rgba(8, 19, 12, 0.58);
  --am-hero-overlay-mid: rgba(8, 19, 12, 0.58);
  --am-hero-overlay-top: rgba(8, 19, 12, 0.30);
  --am-bg-photo: url("../images/hero/fondo-vol3.jpeg");
  --am-bg-photo-opacity: 0.35;
  --am-bg-photo-blend: screen;
}
body[data-vol="4"] {
  --am-home-bg:           var(--am-v4-fondo-oscuro);
  --am-home-surface:      #101E34;
  --am-home-text:         var(--am-v4-texto);
  --am-home-text-muted:   var(--am-v4-texto-secundario);
  --am-home-accent:       var(--am-v4-secundario);
  --am-home-accent-soft:  var(--am-v4-acento);
  --am-on-accent:         var(--am-v4-texto);
  --am-home-quote-bg:     #081020;
  --am-home-border:       rgba(90, 138, 181, 0.12);
  --am-nav-bg:            rgba(10, 22, 40, 0.94);
  --am-nav-hover-bg:      rgba(245, 244, 239, 0.06);
  --am-nav-active-bg:     rgba(90, 138, 181, 0.16);
  --am-nav-active-text:   var(--am-v4-acento);
  --am-control-focus-bg:  rgba(30, 58, 95, 0.22);
  --am-cta-hover-bg:      var(--am-v4-principal);
  --am-input-placeholder: var(--am-v4-texto);
  --am-noise-opacity:     0;
  --am-bg-grad-color-a:   rgba(15, 36, 64, 0.4);
  --am-bg-grad-color-b:   rgba(30, 58, 95, 0.2);
  --am-bg-grad-bottom:    var(--am-v4-fondo-oscuro);
  --am-heading-shadow: rgba(90, 138, 181, 0.12); --am-h1-shadow: rgba(90, 138, 181, 0.18);
  --am-shadow-card:       0 8px 25px rgba(10, 22, 40, 0.55);
  --am-shadow-cta:        0 8px 30px rgba(30, 58, 95, 0.38);
  --am-shadow-cta-hover:  0 12px 40px rgba(15, 36, 64, 0.58);
  --am-shadow-hero:       0 10px 30px rgba(10, 22, 40, 0.58);
  --am-shadow-logo:       0 0 20px rgba(90, 138, 181, 0.20);
  --am-shadow-thumb:      0 4px 12px rgba(10, 22, 40, 0.50);
  --am-shadow-thumb-hover: 0 6px 18px rgba(10, 22, 40, 0.70);
  --am-shadow-thumb-active: 0 6px 18px rgba(90, 138, 181, 0.32);
  --am-shadow-nav-logo: 0 1px 6px rgba(10, 22, 40, 0.45);
  --am-shadow-landing-logo: 0 4px 24px rgba(10, 22, 40, 0.58);
  --am-hero-overlay-mid: rgba(10, 22, 40, 0.58); --am-hero-overlay-top: rgba(10, 22, 40, 0.30);
  --am-bg-photo: url("../images/hero/fondo-vol4.jpeg");
  --am-bg-photo-opacity: 0.45;
  --am-bg-photo-blur: 0px;
  --am-bg-photo-scale: 1;
  --am-bg-photo-blend: screen;
}