/* ==========================================================================
   Graduaciones Vázquez 2026 — Tokens
   Paleta medida sobre el logotipo del cliente (wp-content/uploads/2020/02/LOGO.png):
   vino #B71648 al 45.6 % de los píxeles, negro #040404 al 40.1 %.

   REGLA QUE NO SE ROMPE
   ---------------------
   --vino   es SOLO para rellenos (fondos de botón, barras, chips).
   --acento es SOLO para texto. Cambia de valor en fondo oscuro.

   Remapear --vino dentro de .tono-oscuro rompe los botones: el relleno se
   aclara y el blanco encima cae por debajo de 4.5:1. Por eso son dos tokens
   distintos y herramientas/auditar-contraste.py falla si alguien escribe
   color: var(--vino).
   ========================================================================== */

:root {
  /* ---- marca ---- */
  --vino:        #B71648;   /* relleno. Blanco encima: 6.56:1 AA */
  --vino-hover:  #8E0F37;   /* :hover y :active de relleno vino */
  --vino-suave:  #FBEEF2;   /* fondo de realce muy claro */
  --acento:      #B71648;   /* TEXTO sobre claro. 6.56:1 AA */

  --tinta:       #0C0C0D;   /* negro del birrete del logotipo */
  --tinta-2:     #16161A;   /* superficie oscura elevada */
  --tinta-3:     #24242A;   /* bordes sobre oscuro */
  --texto:       #1A1A1E;   /* cuerpo sobre claro. 15.8:1 */
  --texto-2:     #4A4A52;   /* secundario sobre claro. 8.2:1 */
  --texto-3:     #6E6E78;   /* terciario sobre claro. 4.8:1 AA */

  --oro:         #C9A227;   /* SOLO sobre oscuro: 8.09:1. Sobre blanco 2.42:1, NO usar */
  --oro-suave:   #E8D9A0;

  --hueso:       #FAF8F6;   /* fondo de página */
  --nube:        #F1EDEA;   /* fondo alterno */
  --borde:       #E2DCD7;
  --blanco:      #FFFFFF;

  /* ---- superficies semánticas (las que usan los componentes) ---- */
  --fondo:       var(--hueso);
  --superficie:  var(--blanco);
  --superficie-2:var(--nube);
  --linea:       var(--borde);
  --sobre-vino:  var(--blanco);   /* texto encima de un relleno vino */

  /* ---- tipografía ---- */
  --f-titulo: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-acento: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Escala fluida. El mínimo es el tamaño en móvil de 360 px,
     el máximo el de escritorio a 1440 px. */
  --t-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --t-md:   clamp(1.13rem, 1.06rem + 0.32vw, 1.30rem);
  --t-lg:   clamp(1.35rem, 1.22rem + 0.58vw, 1.70rem);
  --t-xl:   clamp(1.70rem, 1.45rem + 1.10vw, 2.40rem);
  --t-2xl:  clamp(2.10rem, 1.65rem + 2.00vw, 3.40rem);
  --t-3xl:  clamp(2.60rem, 1.85rem + 3.30vw, 4.80rem);
  --t-4xl:  clamp(3.00rem, 1.90rem + 4.90vw, 6.20rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-negro:  800;

  --alto-apretado: 1.06;
  --alto-titulo:   1.14;
  --alto-texto:    1.68;

  /* ---- espaciado ---- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  --seccion:   clamp(4rem, 3rem + 5vw, 7.5rem);   /* padding vertical de sección */
  --ancho:     78rem;                              /* contenedor estándar */
  --ancho-max: 92rem;                              /* contenedor ancho */
  --medida:    38rem;  /* medida de lectura. En rem, NUNCA en ch: ch es relativo
                          a la fuente del propio elemento y los h2 se salen. */
  --canal:     clamp(1.15rem, 0.7rem + 2.2vw, 3rem); /* margen lateral */

  /* ---- formas ---- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* ---- sombras ---- */
  --s-1: 0 1px 2px rgba(12,12,13,.05), 0 1px 3px rgba(12,12,13,.06);
  --s-2: 0 2px 6px rgba(12,12,13,.05), 0 8px 20px rgba(12,12,13,.07);
  --s-3: 0 4px 12px rgba(12,12,13,.07), 0 18px 44px rgba(12,12,13,.10);
  --s-vino: 0 10px 30px rgba(183,22,72,.26);

  /* ---- movimiento ---- */
  --ms-rapido: 180ms;
  --ms-medio:  320ms;
  --ms-lento:  620ms;
  --curva:      cubic-bezier(.22,.61,.36,1);
  --curva-suave:cubic-bezier(.33,1,.68,1);
  --curva-salida:cubic-bezier(.4,0,.2,1);

  --cabecera-alto: 84px;
  --z-cabecera: 100;
  --z-menu: 110;
  --z-modal: 200;
}

/* --------------------------------------------------------------------------
   Fondo oscuro. Solo se redefinen las superficies y --acento.
   --vino NO cambia: sigue siendo el mismo relleno, porque el blanco encima
   ya cumple 6.56:1 y aclararlo lo empeoraría.
   -------------------------------------------------------------------------- */
.tono-oscuro {
  --fondo:       var(--tinta);
  --superficie:  var(--tinta-2);
  --superficie-2:#1D1D22;
  --linea:       var(--tinta-3);

  --texto:       #F4F2F0;   /* 16.4:1 sobre #0C0C0D */
  --texto-2:     #C4C0BC;   /* 10.6:1 */
  --texto-3:     #908C89;   /* 5.3:1 AA */
  --acento:      #E8577F;   /* 5.69:1 AA. El vino puro daría 2.98:1 */

  color: var(--texto);
  background: var(--fondo);
}

/* Variante vino sólido: el fondo ES el color de marca */
.tono-vino {
  --fondo:      var(--vino);
  --superficie: rgba(255,255,255,.10);
  --linea:      rgba(255,255,255,.22);
  --texto:      #FFFFFF;   /* 6.52:1 sobre el vino */
  /* Los dos siguientes son el blanco al 86 % y al 68 % YA MEZCLADO sobre
     #B71648. En hex el auditor puede medirlos; en rgba() no, y ahí es donde
     se cuelan los textos ilegibles sobre fondo de color. */
  --texto-2:    #F5DEE5;   /* 5.36:1 */
  --texto-3:    #E8B4C4;   /* 4.53:1 */
  --acento:     #FFFFFF;

  color: var(--texto);
  background: var(--fondo);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ms-rapido: 1ms; --ms-medio: 1ms; --ms-lento: 1ms; }
}