/* ============================================================
   RELAXMO — TOKENS DE MARCA
   Único origen de verdad para el color en todo el sitio.

   Regla: ningún archivo del proyecto vuelve a escribir un hex.
   Todo se referencia como var(--rm-*). Si un color no existe
   acá, se agrega acá — no se inventa en el archivo que lo pide.

   Dirección: Teal clínico · hue 177-178
   Contrastes verificados contra WCAG 2.1 AA (4.5:1 texto, 3:1 UI)
   Última revisión: 24 ago 2026
   ============================================================ */

:root {

  /* ── RAMPA PRIMARIA ─────────────────────────────────────────
     La escala completa del teal. Todo lo demás sale de acá.
     El número indica luminosidad, no importancia.            */

  --rm-teal-50:  #F0F7F7;   /* fondos de sección, chips suaves    */
  --rm-teal-100: #D8EDEB;   /* fondos hover de items de lista     */
  --rm-teal-200: #AFDBD7;   /* bordes de elementos activos        */
  --rm-teal-300: #79C3BD;   /* iconografía decorativa             */
  --rm-teal-400: #1BA69F;   /* extremo luminoso del gradiente     */
  --rm-teal-500: #128B85;   /* anillo de foco                     */
  --rm-teal-600: #0E6E6B;   /* ★ PRIMARIO — botones, links        */
  --rm-teal-700: #0B5B58;   /* hover del primario                 */
  --rm-teal-800: #084F4C;   /* activo / extremo oscuro gradiente  */
  --rm-teal-900: #063A38;   /* títulos sobre fondo teal claro     */

  /* ── RAMPA NEUTRA ───────────────────────────────────────────
     Grises con sesgo teal (hue ~175), no grises puros.
     Reemplazan las dos familias mezcladas que hay hoy
     (Tailwind `gray` en 220° y `slate` en 210°).             */

  --rm-white:    #FFFFFF;
  --rm-gray-50:  #F6F9F9;   /* fondo de página                    */
  --rm-gray-100: #EDF2F2;   /* superficie hundida, separadores    */
  --rm-gray-200: #DBE4E3;   /* borde por defecto                  */
  --rm-gray-300: #BFCDCC;   /* borde marcado, divisores fuertes   */
  --rm-gray-400: #9DA9A8;   /* texto deshabilitado                */
  --rm-gray-500: #778786;   /* texto terciario, placeholders      */
  --rm-gray-600: #556361;   /* texto secundario                   */
  --rm-gray-700: #33403F;   /* texto sobre fondos claros de color */
  --rm-gray-900: #13201F;   /* texto principal                    */

  /* ── VALORACIÓN ─────────────────────────────────────────────
     Las estrellas de rating y el badge de verificado. Es un rol
     propio, no un "warning": mandarlas a la rampa de aviso las
     dejaba en beige y desaparecían.

     Excepción de contraste consciente: da 2.0:1 sobre blanco.
     Ningún dorado que siga leyéndose dorado llega a 3:1 — a esa
     altura ya es mostaza. Se acepta porque la valoración nunca
     va sola: siempre la acompaña el número ("4,9"), así que la
     información no depende del color. Si alguna vez una estrella
     queda sin su número al lado, ese caso sí hay que revisarlo.
     El valor anterior (#FBBF24) daba 1.67:1, así que esto mejora. */

  --rm-star:        #E8AE20;
  --rm-star-empty:  var(--rm-gray-300);

  /* ── SEMÁNTICOS ─────────────────────────────────────────────
     Lo que se usa en el código. Nunca referenciar la rampa
     directamente desde un componente: usar estos.            */

  --rm-primary:          var(--rm-teal-600);
  --rm-primary-hover:    var(--rm-teal-700);
  --rm-primary-active:   var(--rm-teal-800);
  --rm-primary-subtle:   var(--rm-teal-50);
  --rm-primary-border:   var(--rm-teal-200);
  --rm-primary-on:       var(--rm-white);   /* texto sobre primario */

  --rm-bg:               var(--rm-gray-50);
  --rm-surface:          var(--rm-white);
  --rm-surface-sunk:     var(--rm-gray-100);
  --rm-border:           var(--rm-gray-200);
  --rm-border-strong:    var(--rm-gray-300);

  --rm-text:             var(--rm-gray-900);
  --rm-text-muted:       var(--rm-gray-600);
  --rm-text-faint:       var(--rm-gray-500);
  --rm-text-disabled:    var(--rm-gray-400);
  --rm-text-on-dark:     var(--rm-white);

  /* Acento cálido — complementario del teal.
     Para destacar sin usar el primario: badges de "destacado",
     estrellas de valoración, elementos promocionales.        */
  --rm-accent:           #A46747;
  --rm-accent-hover:     #8C563A;
  --rm-accent-subtle:    #F7EFEB;
  --rm-accent-border:    #E3CCC1;

  /* ── GRADIENTES ─────────────────────────────────────────────
     Un solo color, dos luces. Nunca dos colores distintos.

     Importante: el gradiente de UI NO usa el extremo luminoso.
     Medido, teal-400 da 3.0:1 contra blanco — no alcanza para
     texto. Por eso los botones van del primario hacia el
     oscuro, y solo el logo usa la rampa completa.            */

  --rm-grad-logo: linear-gradient(100deg,
                    var(--rm-teal-600)  0%,
                    var(--rm-teal-400) 55%,
                    var(--rm-teal-800) 100%);

  --rm-grad-ui:   linear-gradient(135deg,
                    var(--rm-teal-600),
                    var(--rm-teal-800));

  --rm-grad-band: linear-gradient(120deg,
                    var(--rm-teal-800),
                    var(--rm-teal-600));

  /* ── ESTADOS DE SISTEMA ─────────────────────────────────────
     `-solid` lleva texto blanco, salvo warning (ver abajo).
     `-fg` es el texto sobre su propio `-bg`.                 */

  --rm-success:          #187E44;
  --rm-success-fg:       #136B3A;
  --rm-success-bg:       #E7F4EC;
  --rm-success-border:   #B6DEC6;

  --rm-danger:           #C62F22;
  --rm-danger-fg:        #A32218;
  --rm-danger-bg:        #FCEBE9;
  --rm-danger-border:    #F3C4BF;

  /* warning es el único que NO sostiene texto blanco: ningún
     ámbar legible llega a 4.5:1. Sobre --rm-warning va
     --rm-warning-on, que es texto oscuro.                    */
  --rm-warning:          #C98A15;
  --rm-warning-on:       var(--rm-gray-900);
  --rm-warning-fg:       #8A5A08;
  --rm-warning-bg:       #FCF3E0;
  --rm-warning-border:   #EDD7A3;

  --rm-info:             #2A6CC4;
  --rm-info-fg:          #1D4E8F;
  --rm-info-bg:          #E9F1FB;
  --rm-info-border:      #BBD3EF;

  /* ── FOCO ───────────────────────────────────────────────────
     Un solo anillo para todo el sitio. Accesibilidad: debe ser
     visible en teclado, no solo en mouse.                    */

  --rm-focus-ring:       var(--rm-teal-500);
  --rm-focus-shadow:     0 0 0 3px rgba(18, 139, 133, 0.35);

  /* ── SOMBRAS ────────────────────────────────────────────────
     Teñidas con el primario en vez de negro puro: sobre fondos
     claros el negro ensucia, el teal oscuro no.              */

  --rm-shadow-sm:  0 1px 2px  rgba(6, 58, 56, 0.06);
  --rm-shadow-md:  0 4px 14px rgba(6, 58, 56, 0.09);
  --rm-shadow-lg:  0 12px 32px rgba(6, 58, 56, 0.13);

  /* ── MARCAS DE TERCEROS — NO TOCAR ──────────────────────────
     Estos colores no son nuestros. Cambiarlos rompe el
     reconocimiento del botón y, en algunos casos, viola las
     guías de marca del tercero.                              */

  --rm-whatsapp:  #25D366;
  --rm-facebook:  #1877F2;
  --rm-instagram: linear-gradient(45deg, #833AB4, #E1306C 50%, #FD1D1D);
  --rm-linkedin:  #0A66C2;


  /* ══ ALIAS DE COMPATIBILIDAD ═══════════════════════════════
     Los nombres que ya existen en el código, apuntados a los
     tokens nuevos. Permiten migrar por módulos sin romper
     nada: mientras un archivo siga usando el nombre viejo,
     igual toma el color nuevo.

     Son temporales. Se borran cuando no queden referencias
     (verificar con: grep -r "relaxmo-primary\|rmms-\|primary-purple")
     ═══════════════════════════════════════════════════════ */

  --relaxmo-primary:       var(--rm-primary);
  --relaxmo-primary-color: var(--rm-primary);
  --relaxmo-primary-hover: var(--rm-primary-hover);

  --primary:               var(--rm-primary);
  --primary-dark:          var(--rm-primary-active);
  --primary-light:         var(--rm-teal-400);
  --primary-purple:        var(--rm-primary);       /* renombrar */
  --primary-pink:          var(--rm-teal-500);      /* renombrar */
  --light-purple:          var(--rm-primary-subtle);/* renombrar */

  --rmms-accent:           var(--rm-primary);
  --rmms-bg-light:         var(--rm-bg);
  --rmms-bg-message-me:    var(--rm-primary);
  --rmms-bg-message-other: var(--rm-gray-200);

  --color-primary:         var(--rm-primary);
  --color-primary-hover:   var(--rm-primary-hover);
  --color-primary-active:  var(--rm-primary-active);
  --accent:                var(--rm-accent);
  --gradient-accent:       var(--rm-grad-ui);
  --star-color:            var(--rm-star);
}


/* ============================================================
   UTILIDADES MÍNIMAS
   Solo lo que se repite en todo el sitio. El resto lo resuelve
   cada componente usando los tokens de arriba.
   ============================================================ */

.rm-wordmark {
  background: var(--rm-grad-logo);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* Fallback: si el navegador no soporta background-clip:text,
   el wordmark queda en el tono sólido en vez de invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rm-wordmark {
    background: none;
    color: var(--rm-primary);
    -webkit-text-fill-color: currentColor;
  }
}

.rm-btn-primary {
  background: var(--rm-grad-ui);
  color: var(--rm-primary-on);
  border: 0;
  cursor: pointer;
}
.rm-btn-primary:hover  { background: var(--rm-primary-hover); }
.rm-btn-primary:active { background: var(--rm-primary-active); }
.rm-btn-primary:disabled {
  background: var(--rm-gray-300);
  color: var(--rm-text-disabled);
  cursor: not-allowed;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rm-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}