/* IconButton — LittleLives design system
   Shares all token mappings with Button. Tokens follow /tokens/semantics.web.json.
*/

:root {
  --color-white:        #ffffff;
  --color-dim-06:       rgba(0, 0, 0, 0.06);
  --color-dim-12:       rgba(0, 0, 0, 0.12);
  --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;
}

.ll-icon-button {
  --size: 40px;
  --icon-size: 20px;
  --radius: 999px;

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

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  padding: 0;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

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

/* ---------- Sizes ---------- */
.ll-icon-button[data-size="sm"] { --size: 32px; --icon-size: 16px; }
.ll-icon-button[data-size="md"] { --size: 40px; --icon-size: 20px; }
.ll-icon-button[data-size="lg"] { --size: 48px; --icon-size: 24px; }

/* ---------- Shapes ---------- */
.ll-icon-button[data-shape="circle"] { --radius: 999px; }
.ll-icon-button[data-shape="square"] { --radius: 8px; }

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

/* ---------- Intents ---------- */
.ll-icon-button[data-intent="success"] {
  --strong-default: var(--color-success-800);
  --strong-hover:   var(--color-success-900);
  --strong-pressed: var(--color-success-950);
  --soft-default:   var(--color-success-50);
  --soft-hover:     var(--color-success-50);
  --soft-pressed:   var(--color-success-50);
  --label-strong:   var(--color-success-800);
  --border-strong:  var(--color-success-800);
}
.ll-icon-button[data-intent="error"] {
  --strong-default: var(--color-error-800);
  --strong-hover:   var(--color-error-900);
  --strong-pressed: var(--color-error-950);
  --soft-default:   var(--color-error-50);
  --soft-hover:     var(--color-error-100);
  --soft-pressed:   var(--color-error-100);
  --label-strong:   var(--color-error-800);
  --border-strong:  var(--color-error-800);
}
.ll-icon-button[data-intent="warning"] {
  --strong-default: var(--color-warning-800);
  --strong-hover:   var(--color-warning-900);
  --strong-pressed: var(--color-warning-950);
  --soft-default:   var(--color-warning-50);
  --soft-hover:     var(--color-warning-50);
  --soft-pressed:   var(--color-warning-50);
  --label-strong:   var(--color-warning-800);
  --border-strong:  var(--color-warning-800);
}
.ll-icon-button[data-intent="neutral"] {
  --strong-default: var(--color-neutral-800);
  --strong-hover:   var(--color-neutral-900);
  --strong-pressed: var(--color-neutral-950);
  --soft-default:   var(--color-neutral-50);
  --soft-hover:     var(--color-neutral-100);
  --soft-pressed:   var(--color-neutral-100);
  --label-strong:   var(--color-neutral-800);
  --border-strong:  var(--color-neutral-300);
}

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

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

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

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

/* ---------- Forced state demo helpers ---------- */
.ll-icon-button[data-state="hover"][data-variant="filled-strong"] { background: var(--strong-hover); }
.ll-icon-button[data-state="hover"][data-variant="filled-soft"]   { background: var(--soft-hover); }
.ll-icon-button[data-state="hover"][data-variant="outline"]       { background: var(--color-dim-06); }
.ll-icon-button[data-state="hover"][data-variant="ghost"]         { background: var(--soft-default); }
.ll-icon-button[data-state="focus"] { box-shadow: 0 0 0 3px var(--color-brand-500); }
.ll-icon-button[data-state="focus"][data-variant="outline"] {
  box-shadow: inset 0 0 0 1.5px var(--border-strong),
              0 0 0 3px var(--color-brand-500);
}

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

@media (prefers-reduced-motion: reduce) {
  .ll-icon-button { transition: none !important; }
}