:root {
  --corporative-color: #8B4189;

  /* ================================= */
  /* MIRAI UI — Base theme             */
  /* ================================= */

  /* Colores base — oscuro para coincidir con bg-foreground/95 */
  --mirai-ui-base:             hsl(270deg 10% 15% / 95%);
  --mirai-ui-content:          hsl(0 0% 100%);
  --mirai-ui-content-light:    hsl(0 0% 100% / 0.5);
  --mirai-ui-content-border:   hsl(0 0% 100% / 0.1);

  /* Accent = tu primary (mauve) */
  --mirai-ui-accent:           hsl(301 36% 40%);

  /* Tipografía */
  --mirai-ui-font:             'Varela Round', sans-serif;
  --mirai-ui-font-size:        14px;

  /* Border radius — cuadrado como tu diseño (--radius: 0rem) */
  --mirai-ui-border-radius:    0px;

  /* Botón */
  --mirai-ui-button-background:        hsl(301 36% 40%);
  --mirai-ui-button-color:             hsl(0 0% 100%);
  --mirai-ui-button-radius:            9999px;
  --mirai-ui-button-disabled-background: hsl(0 0% 100% / 0.15);
  --mirai-ui-button-disabled-color:    hsl(0 0% 100% / 0.3);

  /* Input fields */
  --mirai-ui-input-text-border:        solid 0px transparent;
  --mirai-ui-input-text-focus:         hsl(0 0% 100%);

  /* Modal z-index — encima de tu barra (z-50) */
  --mirai-ui-modal-layer:      9999;
  --mirai-ui-modal-background: hsl(270 10% 15%);
  --mirai-ui-modal-overflow:   hsl(270 10% 15% / 0.7);

  /* ================================= */
  /* MIRAI FINDER                      */
  /* ================================= */
  --mirai-finder-background:         hsl(270deg 10% 15% / 95%);
  --mirai-finder-border:             hsl(270deg 10% 15% / 95%);
  --mirai-finder-border-color:       hsl(0 0% 100% / 0.1);
  --mirai-finder-border-radius:      0px;
  --mirai-finder-gap:                0;
  --mirai-finder-padding:            0;
  --mirai-finder-field-height:       56px;
  --mirai-finder-column-border-radius: 0px;
  --mirai-finder-column-padding:     0;
}

/* ================================= */
/* FINDER — layout full width        */
/* ================================= */
[data-mirai-component="finder"] {
  width: 100%;
}

/* ================================= */
/* FINDER — iconos y labels          */
/* ================================= */
[data-mirai-component="finder"] ui-icon {
  color: hsl(0 0% 100% / 0.4) !important;
}

[data-mirai-component="finder"] [data-role="field"] {
  background: transparent !important;
}

/* ================================= */
/* SEARCH BUTTON — pulse animation   */
/* ================================= */
@keyframes pulse-bg-colors {
  0%, 100% { background-color: hsl(301, 36%, 40%); }
  20%       { background-color: hsl(191, 67%, 55%); }
  40%       { background-color: hsl(298, 69%, 66%); }
  60%       { background-color: hsl(134, 46%, 56%); }
  80%       { background-color: hsl(301, 36%, 40%); }
}

[data-mirai-component="finder"] ui-button[data-role="finder-button"] {
  border-radius: 9999px !important;
  animation: pulse-bg-colors 16s ease-in-out infinite !important;
}

[data-mirai-component="finder"] ui-button[data-role="finder-button"]:hover {
  animation: none !important;
  background-color: hsl(301, 36%, 40%) !important;
}

/* ================================= */
/* SIGNUP / PROFILE pages            */
/* ================================= */
[data-mirai-component="signup"] {
  display: flex;
  justify-content: center;
}

[data-mirai-component="profile"],
[data-mirai-component="signup"] {
  padding: 100px 0;
}

/* ================================= */
/* SESSION — scroll-aware colors     */
/* ================================= */

/* Transparente (sobre hero, texto blanco) */
[data-scrolled="false"] [data-mirai-component="session"] {
  --mirai-session-color: hsl(0 0% 100% / 0.7);
  --mirai-session-icon-color: hsl(0 0% 100% / 0.7);
}

/* Scrolled (fondo blanco, texto oscuro) */
[data-scrolled="true"] [data-mirai-component="session"] {
  --mirai-session-color: hsl(270 10% 15% / 0.7);
  --mirai-session-icon-color: hsl(270 10% 15% / 0.7);
}