/* Button — LittleLives design system
   Tokens follow /tokens/semantics.web.json. In sv-frontend, replace custom
   props with Tailwind classes (bg-surface/*, text-content/*, etc.).
*/

:root {
  /* Primitives (subset used by this component) */
  --color-white:        #ffffff;
  --color-dim-06:       rgba(0, 0, 0, 0.06);
  --color-dim-12:       rgba(0, 0, 0, 0.12);
  --color-neutral-25:   #fafafa;
  --color-neutral-50:   #f0f0f0;
  --color-neutral-100:  #e6e6e6;
  --color-neutral-300:  #bbbbbb;
  --color-neutral-600:  #8b8b8b;
  --color-neutral-800:  #545454;
  --color-neutral-900:  #404040;
  --color-neutral-950:  #333333;

  --color-brand-50:     #e6f8fd;
  --color-brand-100:    #cdf4ff;
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;
  --color-brand-900:    #004563;
  --color-brand-950:    #003951;

  --color-success-50:   #e7f7ed;
  --color-success-800:  #096129;
  --color-success-900:  #074a20;
  --color-success-950:  #003a16;

  --color-error-50:     #fdecee;
  --color-error-100:    #fac4cb;
  --color-error-800:    #83232f;
  --color-error-900:    #641b24;
  --color-error-950:    #540e16;

  --color-warning-50:   #fef2e9;
  --color-warning-100:  #fcd8ba;
  --color-warning-800:  #864711;
  --color-warning-900:  #66360d;
  --color-warning-950:  #562903;

  /* Semantic mirrors */
  --surface-default-white:                  var(--color-white);
  --surface-default-disabled:               var(--color-neutral-50);
  --surface-hover-clear:                    var(--color-dim-06);
  --surface-pressed-clear:                  var(--color-dim-12);

  --surface-default-brand-strong:           var(--color-brand-800);
  --surface-hover-brand-strong:             var(--color-brand-900);
  --surface-pressed-brand-strong:           var(--color-brand-950);
  --surface-default-brand-soft:             var(--color-brand-50);
  --surface-hover-brand-soft:               var(--color-brand-100);
  --surface-pressed-brand-soft:             var(--color-brand-100);

  --surface-default-success-strong:         var(--color-success-800);
  --surface-hover-success-strong:           var(--color-success-900);
  --surface-pressed-success-strong:         var(--color-success-950);
  --surface-default-success-soft:           var(--color-success-50);

  --surface-default-error-strong:           var(--color-error-800);
  --surface-hover-error-strong:             var(--color-error-900);
  --surface-pressed-error-strong:           var(--color-error-950);
  --surface-default-error-soft:             var(--color-error-50);
  --surface-hover-error-soft:               var(--color-error-100);

  --surface-default-warning-strong:         var(--color-warning-800);
  --surface-hover-warning-strong:           var(--color-warning-900);
  --surface-pressed-warning-strong:         var(--color-warning-950);
  --surface-default-warning-soft:           var(--color-warning-50);

  --surface-default-neutral-strong:         var(--color-neutral-800);
  --surface-hover-neutral-strong:           var(--color-neutral-900);
  --surface-pressed-neutral-strong:         var(--color-neutral-950);
  --surface-default-neutral-soft:           var(--color-neutral-50);
  --surface-hover-neutral-soft:             var(--color-neutral-100);

  --content-white:               var(--color-white);
  --content-disabled:            var(--color-neutral-300);
  --content-neutral-primary:     var(--color-neutral-950);
  --content-neutral-secondary:   var(--color-neutral-800);
  --content-brand-strong:        var(--color-brand-800);
  --content-success-strong:      var(--color-success-800);
  --content-error-strong:        var(--color-error-800);
  --content-warning-strong:      var(--color-warning-800);

  --stroke-brand:                var(--color-brand-500);
  --stroke-brand-strong:         var(--color-brand-800);
  --stroke-success-strong:       var(--color-success-800);
  --stroke-error-strong:         var(--color-error-800);
  --stroke-warning-strong:       var(--color-warning-800);
  --stroke-neutral-soft-primary: var(--color-neutral-300);
  --stroke-disabled:             var(--color-neutral-100);
}

/* ---------- Base ---------- */
.ll-button {
  --pad-x: 16px;
  --height: 40px;
  --font-size: 16px;
  --gap: 8px;
  --icon-size: 20px;

  /* per-intent palette tokens, defaulted to brand and overridden via [data-intent] */
  --strong-default: var(--surface-default-brand-strong);
  --strong-hover:   var(--surface-hover-brand-strong);
  --strong-pressed: var(--surface-pressed-brand-strong);
  --soft-default:   var(--surface-default-brand-soft);
  --soft-hover:     var(--surface-hover-brand-soft);
  --soft-pressed:   var(--surface-pressed-brand-soft);
  --label-strong:   var(--content-brand-strong);
  --border-strong:  var(--stroke-brand-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  height: var(--height);
  padding: 0 var(--pad-x);
  border: 0;
  border-radius: 999px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: var(--font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: inherit;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.ll-button:focus { outline: none; }
.ll-button:focus-visible { box-shadow: 0 0 0 3px var(--stroke-brand); }

/* ---------- Sizes ---------- */
.ll-button[data-size="sm"] {
  --pad-x: 12px;
  --height: 32px;
  --font-size: 14px;
  --icon-size: 16px;
}
.ll-button[data-size="lg"] {
  --pad-x: 20px;
  --height: 48px;
}

/* ---------- Icons ---------- */
.ll-button__icon {
  display: inline-flex;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  color: currentColor;
}
.ll-button__icon:empty { display: none; }
.ll-button__icon svg { width: 100%; height: 100%; display: block; }

.ll-button__label:empty { display: none; }

/* ---------- Intents ---------- */
.ll-button[data-intent="success"] {
  --strong-default: var(--surface-default-success-strong);
  --strong-hover:   var(--surface-hover-success-strong);
  --strong-pressed: var(--surface-pressed-success-strong);
  --soft-default:   var(--surface-default-success-soft);
  --soft-hover:     var(--surface-default-success-soft);
  --soft-pressed:   var(--surface-default-success-soft);
  --label-strong:   var(--content-success-strong);
  --border-strong:  var(--stroke-success-strong);
}
.ll-button[data-intent="error"] {
  --strong-default: var(--surface-default-error-strong);
  --strong-hover:   var(--surface-hover-error-strong);
  --strong-pressed: var(--surface-pressed-error-strong);
  --soft-default:   var(--surface-default-error-soft);
  --soft-hover:     var(--surface-hover-error-soft);
  --soft-pressed:   var(--surface-hover-error-soft);
  --label-strong:   var(--content-error-strong);
  --border-strong:  var(--stroke-error-strong);
}
.ll-button[data-intent="warning"] {
  --strong-default: var(--surface-default-warning-strong);
  --strong-hover:   var(--surface-hover-warning-strong);
  --strong-pressed: var(--surface-pressed-warning-strong);
  --soft-default:   var(--surface-default-warning-soft);
  --soft-hover:     var(--surface-default-warning-soft);
  --soft-pressed:   var(--surface-default-warning-soft);
  --label-strong:   var(--content-warning-strong);
  --border-strong:  var(--stroke-warning-strong);
}
.ll-button[data-intent="neutral"] {
  --strong-default: var(--surface-default-neutral-strong);
  --strong-hover:   var(--surface-hover-neutral-strong);
  --strong-pressed: var(--surface-pressed-neutral-strong);
  --soft-default:   var(--surface-default-neutral-soft);
  --soft-hover:     var(--surface-hover-neutral-soft);
  --soft-pressed:   var(--surface-hover-neutral-soft);
  --label-strong:   var(--content-neutral-primary);
  --border-strong:  var(--stroke-neutral-soft-primary);
}

/* ---------- Variant: filled-strong ---------- */
.ll-button[data-variant="filled-strong"] {
  background: var(--strong-default);
  color: var(--content-white);
}
.ll-button[data-variant="filled-strong"]:hover { background: var(--strong-hover); }
.ll-button[data-variant="filled-strong"]:active,
.ll-button[data-variant="filled-strong"][data-state="pressed"] { background: var(--strong-pressed); }

/* ---------- Variant: filled-soft ---------- */
.ll-button[data-variant="filled-soft"] {
  background: var(--soft-default);
  color: var(--label-strong);
}
.ll-button[data-variant="filled-soft"]:hover { background: var(--soft-hover); }
.ll-button[data-variant="filled-soft"]:active,
.ll-button[data-variant="filled-soft"][data-state="pressed"] { background: var(--soft-pressed); }

/* ---------- Variant: outline ---------- */
.ll-button[data-variant="outline"] {
  background: var(--surface-default-white);
  color: var(--label-strong);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.ll-button[data-variant="outline"]:hover { background: var(--surface-hover-clear); }
.ll-button[data-variant="outline"]:active,
.ll-button[data-variant="outline"][data-state="pressed"] { background: var(--surface-pressed-clear); }
.ll-button[data-variant="outline"]:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--border-strong),
              0 0 0 3px var(--stroke-brand);
}

/* ---------- Variant: ghost ---------- */
.ll-button[data-variant="ghost"] {
  background: transparent;
  color: var(--label-strong);
}
.ll-button[data-variant="ghost"]:hover { background: var(--soft-default); }
.ll-button[data-variant="ghost"]:active,
.ll-button[data-variant="ghost"][data-state="pressed"] { background: var(--soft-hover); }

/* ---------- Forced state demos ---------- */
.ll-button[data-state="hover"][data-variant="filled-strong"] { background: var(--strong-hover); }
.ll-button[data-state="hover"][data-variant="filled-soft"]   { background: var(--soft-hover); }
.ll-button[data-state="hover"][data-variant="outline"]       { background: var(--surface-hover-clear); }
.ll-button[data-state="hover"][data-variant="ghost"]         { background: var(--soft-default); }
.ll-button[data-state="focus"] { box-shadow: 0 0 0 3px var(--stroke-brand); }
.ll-button[data-state="focus"][data-variant="outline"] {
  box-shadow: inset 0 0 0 1.5px var(--border-strong),
              0 0 0 3px var(--stroke-brand);
}

/* ---------- Disabled ---------- */
.ll-button:disabled,
.ll-button[data-state="disabled"],
.ll-button[aria-disabled="true"] {
  background: var(--surface-default-disabled) !important;
  color: var(--content-disabled) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.ll-button[data-variant="outline"]:disabled,
.ll-button[data-variant="outline"][data-state="disabled"] {
  background: var(--surface-default-white) !important;
  box-shadow: inset 0 0 0 1.5px var(--stroke-disabled) !important;
}
.ll-button[data-variant="ghost"]:disabled,
.ll-button[data-variant="ghost"][data-state="disabled"] {
  background: transparent !important;
}

/* ---------- Loading ---------- */
.ll-button[data-loading="true"] { cursor: progress; pointer-events: none; }
.ll-button[data-loading="true"] .ll-button__icon--leading {
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ll-button-spin 700ms linear infinite;
}
@keyframes ll-button-spin { to { transform: rotate(360deg); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-button { transition: none !important; }
  .ll-button[data-loading="true"] .ll-button__icon--leading { animation: none !important; }
}