/* Fundação visual compartilhada por todas as ferramentas. */

:root {
  --cream: #fdf2dd;
  --white: #fefbf3;
  --ink: #403c46;
  --purple: #5c3781;
  --purple-deep: #492f62;
  --red: #ff4848;
  --button-height: 64px;
  --button-icon-size: 48px;
  --button-motion: 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--ink);
  font-family: "pacaembu", sans-serif;
  font-synthesis: none;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input { font: inherit; }

/* Botões: uma base única, com variantes para os contextos de cada ferramenta. */
.pill-button {
  --button-background: var(--purple);
  --button-color: var(--cream);
  --button-hover-background: var(--purple-deep);
  --button-icon-background: var(--purple-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 8px 72px 8px 24px;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: var(--button-background);
  color: var(--button-color);
  font-size: 20px;
  font-weight: 200;
  line-height: 32px;
  text-align: center;
  transition: background-color 180ms ease;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.pill-button--light {
  --button-background: var(--cream);
  --button-color: var(--purple);
  --button-hover-background: var(--white);
  --button-icon-background: var(--red);
}

.pill-button:hover { background: var(--button-hover-background); }
.pill-button:focus-visible,
.secondary-button:focus-visible,
.text-button:focus-visible,
.format-option:focus-visible,
.color-option:focus-visible,
.flow-control:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

.pill-button__label {
  transform: translateX(0);
  transition: transform var(--button-motion);
}

.pill-button__icon {
  position: absolute;
  top: 50%;
  display: grid;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  place-items: center;
  overflow: hidden;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--button-icon-background);
}

.pill-button__icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.pill-button--upload { padding-right: 24px; padding-left: 72px; }
.pill-button--forward { padding-right: 72px; }
.pill-button--upload .pill-button__icon { left: 8px; }
.pill-button--forward .pill-button__icon { right: 8px; }
.pill-button--upload:hover .pill-button__label { transform: translateX(-48px); }
.pill-button--forward:hover .pill-button__label { transform: translateX(48px); }
.pill-button--upload:hover .pill-button__icon { animation: icon-swap-left-to-right var(--button-motion) both; }
.pill-button--forward:hover .pill-button__icon { animation: icon-swap-right-to-left var(--button-motion) both; }
.pill-button--upload.is-returning .pill-button__label,
.pill-button--forward.is-returning .pill-button__label { transform: translateX(0); }
.pill-button--upload.is-returning .pill-button__icon { animation: icon-swap-right-to-left var(--button-motion) both; }
.pill-button--forward.is-returning .pill-button__icon { animation: icon-swap-left-to-right var(--button-motion) both; }

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 16px 24px;
  cursor: pointer;
  border: 1px solid var(--purple);
  border-radius: 999px;
  background: transparent;
  color: var(--purple);
  font-size: 20px;
  font-weight: 200;
  line-height: 32px;
  text-align: center;
  transition: background-color 180ms ease, color 180ms ease;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.secondary-button:hover { background: var(--white); }

.text-button {
  padding: 4px 12px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--purple);
  font-size: 18px;
  font-weight: 200;
  text-decoration: underline;
  text-underline-offset: 3px;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.text-button:hover { color: var(--purple-deep); }

@keyframes icon-swap-left-to-right {
  0% { left: 8px; right: auto; opacity: 1; }
  38% { left: -48px; right: auto; opacity: 0; }
  39% { left: auto; right: -48px; opacity: 0; }
  100% { left: auto; right: 8px; opacity: 1; }
}

@keyframes icon-swap-right-to-left {
  0% { right: 8px; left: auto; opacity: 1; }
  38% { right: -48px; left: auto; opacity: 0; }
  39% { right: auto; left: -48px; opacity: 0; }
  100% { right: auto; left: 8px; opacity: 1; }
}

@media (max-width: 800px) {
  .pill-button,
  .secondary-button { font-size: clamp(18px, 4.5vw, 20px); line-height: 1.4; }
}