/* ===========================================================================
   ACUBERO — tokens de marca. FUENTE ÚNICA.
   Aquí y solo aquí se escriben los valores de la identidad visual. Los dos
   consumidores leen de este fichero:
     - el portal, con un <link> en plantillas/base.html, antes de estilo.css;
     - la web pública, que lo importa desde src/app/globals.css y lo incrusta
       en tiempo de compilación (no hay dependencia en ejecución).
   Cada uno les pone después sus propios alias, porque Tailwind exige el
   prefijo --color-* y el portal usa nombres cortos. El valor, uno.

   Antes esto estaba escrito dos veces, a mano, y ya se había desincronizado:
   el gris de texto se corrigió en el portal por contraste y la web se quedó
   con el viejo, que no pasaba AA. Un cambio de color aquí llega a los dos
   sitios; si algún día vuelven a separarse, es que alguien ha escrito un
   valor fuera de este fichero.
   =========================================================================== */

:root {
  /* Marca */
  --marca-teal-50:  #f2f8f8;
  --marca-teal-100: #e0eeee;
  --marca-teal-200: #c4dede;
  --marca-teal-300: #9ecece;
  --marca-teal-400: #7fbcbb;
  --marca-teal-500: #6babaa;
  --marca-teal-600: #4d8f8e;
  --marca-teal-700: #3d7372;
  --marca-teal-800: #325c5c;
  --marca-teal-900: #2b4c4b;

  /* Superficies cálidas */
  --marca-cream: #f5f0ea;
  --marca-sand:  #f7f4f0;

  /* Tinta: verdosa, no gris neutro */
  --marca-ink:      #12211f;
  --marca-ink-soft: #2a2a2a;
  /* El gris de los datos secundarios —fechas, contadores, estados—, que es
     media pantalla. El #6d807f de antes daba 4,16:1 sobre blanco y 3,80 sobre
     el fondo: no llegaba al 4,5 de WCAG AA. Este da 5,54 y 5,05. */
  --marca-muted:    #5a6c6b;
  --marca-hairline: #e6e0d8;

  /* Tipografía. La familia se nombra aquí; de cargarla se encarga cada pieza
     (el portal las autoaloja, la web las sirve con next/font). */
  --marca-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --marca-sans:  "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Radios */
  --marca-radius-card: 20px;
  --marca-radius-xl2:  28px;
  --marca-radius-pill: 999px;
  /* El del botón, específicamente: lo fija la guía estética de la tarjeta NFC
     (guia-estetica-acubero-nfc.md, «Ambos: border-radius: 14px»), y no
     coincide con --marca-radius-card. Antes el portal lo tenía clavado a 14px
     dentro de .boton y la web lo redondeaba del todo (rounded-full, forma de
     píldora): los botones no se veían igual en las dos piezas. */
  --marca-radius-boton: 14px;

  /* Sombras: siempre teñidas de teal, nunca negro puro. Es lo que da el aire
     suave de la marca; en negro se ve barato. */
  --marca-shadow-soft:  0 2px 14px rgba(18, 33, 31, .05);
  --marca-shadow-card:  0 8px 30px -12px rgba(45, 76, 75, .18);
  --marca-shadow-lift:  0 22px 50px -20px rgba(45, 76, 75, .32);
  --marca-shadow-brand: 0 12px 30px -10px
    color-mix(in srgb, var(--marca-teal-500) 55%, transparent);

  /* Degradado de marca */
  --marca-degradado: linear-gradient(135deg, #6babaa 0%, #4d8f8e 100%);

  --marca-ease: cubic-bezier(.4, 0, .2, 1);
}