/*
  Wortic macOS UI Kit — Button
  wm-button — botão "físico" no espírito macOS 2026 Liquid Glass:
  superfície elevada com gradiente vertical sutil, sombra em 3 camadas
  (ring hairline + contato + ambiente), inner top highlight e compressão
  tátil no pressed. Cores privadas usam light-dark() — colors.css define
  color-scheme em todos os caminhos de tema.
*/

@layer components {
  .wm-button {
    /* Superfície e elevação privadas — cada variante sobrescreve. */
    --_bg-top: var(--wm-control-face-top);
    --_bg-bottom: var(--wm-control-face-bottom);
    --_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14)),
      inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
      0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26)),
      0 2px 6px -2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    height: var(--wm-control-height-md);
    padding-inline: var(--wm-space-6);
    border-radius: var(--wm-radius-sm);
    border: none;
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-letter-spacing-tight);
    line-height: 1;
    white-space: nowrap;
    color: var(--wm-label-primary);
    /* fallback para engines sem light-dark() */
    background: var(--wm-fill-primary);
    background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
    box-shadow: var(--_elev);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      filter var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-button:hover {
    --_bg-top: var(--wm-control-face-top-hover);
    --_bg-bottom: var(--wm-control-face-bottom-hover);
    --_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.16)),
      inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12)),
      0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.28)),
      0 4px 10px -3px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
  }

  .wm-button:active {
    --_bg-top: var(--wm-control-face-top-pressed);
    --_bg-bottom: var(--wm-control-face-bottom-pressed);
    --_elev: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1)),
      inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.3)),
      0 1px 1px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
    transform: scale(0.985);
  }

  .wm-button:focus-visible {
    outline: 2px solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-button:disabled,
  .wm-button.is-disabled {
    cursor: not-allowed;
    color: var(--wm-label-tertiary);
    background: var(--wm-fill-tertiary);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
  }
  .wm-button:disabled:active,
  .wm-button.is-disabled:active {
    transform: none;
  }

  /* ---------- Variants ---------- */

  .wm-button--prominent,
  .wm-button--primary {
    --_bg-top: color-mix(in srgb, var(--wm-accent), #ffffff 14%);
    --_bg-bottom: var(--wm-accent);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 22%),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 1px 2px color-mix(in srgb, var(--wm-accent) 32%, transparent),
      0 3px 8px -2px color-mix(in srgb, var(--wm-accent) 42%, transparent);
    background: var(--wm-accent);
    background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
    color: var(--wm-label-on-accent);
  }
  .wm-button--prominent:hover,
  .wm-button--primary:hover {
    --_bg-top: color-mix(in srgb, var(--wm-accent-hover), #ffffff 14%);
    --_bg-bottom: var(--wm-accent-hover);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 22%),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 2px 4px color-mix(in srgb, var(--wm-accent) 34%, transparent),
      0 5px 12px -3px color-mix(in srgb, var(--wm-accent) 48%, transparent);
  }
  .wm-button--prominent:active,
  .wm-button--primary:active {
    --_bg-top: var(--wm-accent-pressed);
    --_bg-bottom: color-mix(in srgb, var(--wm-accent-pressed), #000000 6%);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent-pressed), #000000 24%),
      inset 0 1px 2px rgba(0, 0, 0, 0.22),
      0 1px 2px color-mix(in srgb, var(--wm-accent) 26%, transparent);
  }
  .wm-button--prominent:disabled,
  .wm-button--primary:disabled,
  .wm-button--prominent.is-disabled,
  .wm-button--primary.is-disabled {
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-tertiary);
  }

  .wm-button--secondary {
    --_elev: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
  }
  .wm-button--secondary:hover {
    --_elev: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
    background: var(--wm-fill-primary);
  }
  .wm-button--secondary:active {
    --_elev: inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
    background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18));
  }

  /* A superfície cheia usa --wm-error-SOLID, não --wm-error. No tema
     escuro --wm-error é #ff8a80 (salmão claro) e o texto branco em cima
     dava 2.07:1 — reprovado com folga nos 4.5:1 exigidos. Com o token
     solid (#c62f25 nos dois temas) o mesmo botão mede 4.57:1 no topo do
     gradiente e 5.48:1 na base. colors.css já diz, em comentário, que
     os tokens *-solid são "os únicos que aguentam texto branco".
     O texto sai de --wm-label-on-accent; #ffffff cru era hex solto. */
  .wm-button--destructive {
    --_bg-top: color-mix(in srgb, var(--wm-error-solid), #ffffff 12%);
    --_bg-bottom: var(--wm-error-solid);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 20%),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1px 2px color-mix(in srgb, var(--wm-error-solid) 30%, transparent),
      0 3px 8px -2px color-mix(in srgb, var(--wm-error-solid) 40%, transparent);
    background: var(--wm-error-solid);
    background: linear-gradient(180deg, var(--_bg-top), var(--_bg-bottom));
    color: var(--wm-label-on-accent);
  }
  .wm-button--destructive:hover {
    --_bg-top: color-mix(in srgb, var(--wm-error-solid), #ffffff 18%);
    --_bg-bottom: color-mix(in srgb, var(--wm-error-solid), #ffffff 5%);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 20%),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 2px 4px color-mix(in srgb, var(--wm-error-solid) 32%, transparent),
      0 5px 12px -3px color-mix(in srgb, var(--wm-error-solid) 46%, transparent);
  }
  .wm-button--destructive:active {
    --_bg-top: color-mix(in srgb, var(--wm-error-solid), #000000 10%);
    --_bg-bottom: color-mix(in srgb, var(--wm-error-solid), #000000 16%);
    --_elev: 0 0 0 0.5px color-mix(in srgb, var(--wm-error-solid), #000000 24%),
      inset 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .wm-button--destructive.wm-button--plain,
  .wm-button--destructive.wm-button--ghost {
    --_elev: 0 0 0 0 transparent;
    background: transparent;
    color: var(--wm-error);
  }
  .wm-button--destructive.wm-button--plain:hover,
  .wm-button--destructive.wm-button--ghost:hover {
    background: var(--wm-error-fill);
  }
  .wm-button--destructive:focus-visible {
    outline-color: var(--wm-error);
    box-shadow: var(--_elev), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
  }

  .wm-button--ghost,
  .wm-button--plain,
  .wm-button--borderless {
    --_elev: 0 0 0 0 transparent;
    background: transparent;
  }
  .wm-button--ghost:hover,
  .wm-button--plain:hover,
  .wm-button--borderless:hover {
    --_elev: 0 0 0 0 transparent;
    background: var(--wm-fill-secondary);
  }
  .wm-button--ghost:active,
  .wm-button--plain:active,
  .wm-button--borderless:active {
    --_elev: 0 0 0 0 transparent;
    background: var(--wm-fill-primary);
  }
  .wm-button--plain {
    color: var(--wm-accent);
    font-weight: var(--wm-font-weight-regular);
  }
  .wm-button--borderless {
    padding-inline: var(--wm-space-2);
  }

  .wm-button--outline {
    --_elev: inset 0 0 0 1px var(--wm-separator);
    background: transparent;
  }
  .wm-button--outline:hover {
    --_elev: inset 0 0 0 1px var(--wm-separator-strong);
    background: var(--wm-fill-quaternary);
  }
  .wm-button--outline:active {
    --_elev: inset 0 0 0 1px var(--wm-separator-strong);
    background: var(--wm-fill-tertiary);
  }

  .wm-button--toolbar {
    --_elev: 0 0 0 0 transparent;
    height: var(--wm-control-height-sm);
    padding-inline: var(--wm-space-4);
    background: transparent;
    font-weight: var(--wm-font-weight-regular);
    color: var(--wm-label-secondary);
  }
  .wm-button--toolbar:hover {
    --_elev: 0 0 0 0 transparent;
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
  }
  .wm-button--toolbar:active {
    --_elev: 0 0 0 0 transparent;
    background: var(--wm-fill-primary);
  }

  /* ---------- Shape ---------- */

  .wm-button--rounded {
    border-radius: var(--wm-radius-lg);
  }
  .wm-button--capsule {
    border-radius: var(--wm-radius-pill);
    padding-inline: var(--wm-space-8);
  }
  .wm-button--circular {
    border-radius: var(--wm-radius-pill);
    padding: 0;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
  }

  /* foundation/radius.css dá corner-shape: squircle a TODO .wm-button —
     é a assinatura macOS nos cantos pequenos. Nas duas formas de raio
     pill ela vira defeito: a squircle achata o semicírculo e o botão
     "circular" sai quadradão, o "capsule" sai retângulo arredondado.
     Só aqui o canto volta a ser circular. Visto na tela; a regra
     computada continuava dizendo 999px, o pixel é que dizia o contrário. */
  @supports (corner-shape: squircle) {
    .wm-button--circular,
    .wm-button--capsule {
      corner-shape: round;
    }
  }

  /* ---------- Sizes ---------- */

  .wm-button--small {
    height: var(--wm-control-height-sm);
    padding-inline: var(--wm-space-4);
    font-size: var(--wm-font-size-subheadline);
    border-radius: var(--wm-radius-xs);
    gap: var(--wm-space-2);
  }
  .wm-button--small.wm-button--circular {
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    padding-inline: 0;
    border-radius: var(--wm-radius-pill);
  }

  .wm-button--large {
    height: var(--wm-control-height-lg);
    padding-inline: var(--wm-space-8);
    font-size: var(--wm-font-size-body);
    border-radius: var(--wm-radius-md);
  }
  .wm-button--large.wm-button--circular {
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-lg);
    padding-inline: 0;
    border-radius: var(--wm-radius-pill);
  }

  /* ---------- Icon ---------- */

  .wm-button--icon-only {
    padding: 0;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-sm);
  }
  .wm-button--icon-only.wm-button--small {
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    padding-inline: 0;
  }
  .wm-button--icon-only.wm-button--large {
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-lg);
    padding-inline: 0;
  }

  .wm-button .wm-icon {
    flex: none;
  }

  /* ---------- Loading ---------- */

  .wm-button.is-loading {
    color: transparent;
    pointer-events: none;
  }
  .wm-button.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.6px solid currentColor;
    border-top-color: transparent;
    color: var(--wm-label-secondary);
    animation: wm-spin 0.7s linear infinite;
  }
  .wm-button--prominent.is-loading::after,
  .wm-button--primary.is-loading::after,
  .wm-button--destructive.is-loading::after {
    color: rgba(255, 255, 255, 0.9);
  }

  /* ---------- Group (split button) ---------- */

  .wm-button-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--wm-radius-sm);
    overflow: hidden;
    isolation: isolate;
    /* elevação vive no grupo; os botões internos ficam "rasos" */
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14)),
      0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.26)),
      0 2px 6px -2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
  }
  .wm-button-group .wm-button {
    border-radius: 0;
    box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
  }
  .wm-button-group .wm-button:active {
    transform: none;
  }
  .wm-button-group .wm-button + .wm-button {
    border-inline-start: 1px solid light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.38));
  }
  .wm-button-group--split .wm-button:last-child {
    padding-inline: var(--wm-space-3);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-button {
      transition: none;
    }
    .wm-button:active {
      transform: none;
    }
  }
}