/*
 * LA MARCA DE MIRASIZE, una sola vez para la pagina y para la app.
 * La pagina la carga desde /marca.css y la app tambien (<link rel="stylesheet" href="/marca.css">), asi que
 * un boton o un color se cambia aca y cambia en las dos. Juanjo, 23/10/26: "los botones y colores del landing
 * deben ser los mismos que de la app adentro", frambuesa como el logo, y la letra de clonarig (Outfit).
 *
 * Letras: Outfit para todo; Gloock solo para el logo ("ms" y la palabra Mirasize).
 * Se cargan con: https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Gloock&display=swap
 */
:root {
  --ms-accent: #B4386A;        /* frambuesa: botones principales, enlaces, lo elegido */
  --ms-accent-dark: #8E2A53;   /* frambuesa al pasar el dedo o el mouse */
  --ms-accent-soft: #F6E4EC;   /* rosa claro: fondo del logo, chips elegidos suaves, avisos */
  --ms-on-accent: #FFFFFF;     /* letra sobre frambuesa */
  --ms-ink: #231A2B;           /* texto */
  --ms-muted: #6E6475;         /* texto secundario */
  --ms-line: rgba(35, 26, 43, .12);
  --ms-bg: #EFE6EB;            /* fondo de pagina: rosa grisaceo, para que las tarjetas blancas se despeguen */
  --ms-surface: #FFFFFF;       /* tarjetas y paneles */
  --ms-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-font-logo: "Gloock", Georgia, serif;
  --ms-font-data: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ms-radius-pill: 999px;
  --ms-radius: 12px;
}

/* Los botones. .ms-btn es el principal (uno por pantalla); .ms-btn.ms-ghost el secundario; .ms-chip para elegir
   entre opciones (tallas, ropa, vistas), con aria-pressed="true" o la clase .activo cuando esta elegido. */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--ms-radius-pill);
  border: 1.5px solid var(--ms-accent); background: var(--ms-accent); color: var(--ms-on-accent);
  font: 600 1rem/1 var(--ms-font); text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ms-btn:hover { background: var(--ms-accent-dark); border-color: var(--ms-accent-dark); }
.ms-btn:active { transform: scale(.98); }
.ms-btn:disabled { opacity: .5; cursor: default; }
.ms-btn.ms-ghost { background: transparent; color: var(--ms-accent); }
.ms-btn.ms-ghost:hover { background: var(--ms-accent-soft); }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--ms-radius-pill); border: 1px solid var(--ms-line); background: var(--ms-surface);
  color: var(--ms-ink); font: 500 .9rem/1 var(--ms-font); cursor: pointer;
}
.ms-chip:hover { border-color: var(--ms-accent); }
.ms-chip[aria-pressed="true"], .ms-chip.activo { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-on-accent); }
:where(.ms-btn, .ms-chip):focus-visible { outline: 3px solid var(--ms-accent-soft); outline-offset: 2px; }