/* Chip (Tag) — LittleLives design system
   Source: Figma node 15972:119230. Tokens follow /tokens/semantics.web.json.
   Colors / sizes / states swap via data-* attrs.
*/

:root {
  /* Primitives (subset) */
  --color-white:        #ffffff;
  --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-950:  #333333;

  --color-brand-50:     #e6f8fd;
  --color-brand-100:    #cdf4ff;
  --color-brand-200:    #8adef6;
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;

  --color-success-50:   #e7f7ed;
  --color-success-100:  #b5e7c7;
  --color-success-200:  #92dbac;
  --color-success-800:  #096129;

  --color-error-50:     #fdecee;
  --color-error-100:    #fac4cb;
  --color-error-200:    #f7a7b1;
  --color-error-800:    #83232f;

  --color-warning-50:   #fef2e9;
  --color-warning-100:  #fcd8ba;
  --color-warning-200:  #fac598;
  --color-warning-800:  #864711;

  --color-pear-50:      #f6faeb;
  --color-pear-100:     #e3f0c2;
  --color-pear-200:     #d6e8a4;
  --color-pear-800:     #5b711f;

  --color-prune-50:     #f3ecfe;
  --color-prune-100:    #d9c3fa;
  --color-prune-200:    #c6a5f8;
  --color-prune-800:    #482184;

  --color-mango-50:     #fffae6;
  --color-mango-100:    #ffefb2;
  --color-mango-200:    #ffe78c;
  --color-mango-800:    #8c7003;
}

/* ---------- Base ---------- */
.ll-chip {
  --bg:        var(--color-white);
  --bg-hover:  var(--color-neutral-25);
  --bg-active: var(--color-neutral-50);
  --border:        var(--color-neutral-300);
  --border-active: var(--color-neutral-300);
  --label:     var(--color-neutral-800);

  --height: 28px;
  --pad-x: 8px;
  --font-size: 16px;
  --icon-size: 20px;
  --avatar-size: 20px;
  --caret-size: 16px;
  --close-size: 20px;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--height);
  padding: 4px var(--pad-x);
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--label);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  user-select: none;
  /* Reset for <button> usage */
  font: inherit;
  font-size: var(--font-size);
  font-weight: 400;
  cursor: default;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.ll-chip--interactive { cursor: pointer; }
.ll-chip--interactive:hover  { background: var(--bg-hover); }
.ll-chip--interactive:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--color-brand-500); }
.ll-chip--interactive[aria-pressed="true"],
.ll-chip--interactive[data-pressed="true"],
.ll-chip[data-state="active"] {
  background: var(--bg-active);
  border-width: 1.5px;
  border-color: var(--border-active);
  padding: 3.5px calc(var(--pad-x) - 0.5px);
}

.ll-chip[data-state="hover"]    { background: var(--bg-hover); }

/* ---------- Sizes ----------
   Canonical names match the Figma source ("minor" / "default" / "32" / "major").
   `xs / sm / md / lg` are kept as deprecated aliases for back-compat. The
   base `.ll-chip` rule above already renders the default size (28), so a
   chip with no `data-size` attribute is the default. */
.ll-chip[data-size="minor"],
.ll-chip[data-size="xs"] {
  --height: 20px;
  --pad-x: 6px;
  --font-size: 14px;
  --icon-size: 16px;
  --avatar-size: 16px;
  --caret-size: 12px;
  --close-size: 16px;
  padding: 2px var(--pad-x);
}
.ll-chip[data-size="default"],
.ll-chip[data-size="sm"] {
  --height: 28px;
  --pad-x: 8px;
  --font-size: 16px;
  --icon-size: 20px;
  --avatar-size: 20px;
}
.ll-chip[data-size="32"],
.ll-chip[data-size="md"] {
  --height: 32px;
  --pad-x: 8px;
  --font-size: 16px;
  --icon-size: 20px;
  --avatar-size: 24px;
}
.ll-chip[data-size="major"],
.ll-chip[data-size="lg"] {
  --height: 40px;
  --pad-x: 8px;
  --font-size: 16px;
  --icon-size: 24px;
  --avatar-size: 28px;
  --close-size: 20px;
}

/* ---------- Slots ---------- */
.ll-chip__icon,
.ll-chip__avatar {
  display: inline-flex;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  color: currentColor;
}
.ll-chip__avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 999px;
  overflow: hidden;
}
.ll-chip__icon svg,
.ll-chip__avatar img,
.ll-chip__avatar svg { width: 100%; height: 100%; display: block; }

.ll-chip__label {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-chip__label:empty { display: none; }

.ll-chip__caret {
  display: inline-flex;
  width: var(--caret-size);
  height: var(--caret-size);
  color: currentColor;
  flex-shrink: 0;
}
.ll-chip__caret svg { width: 100%; height: 100%; display: block; }

/* Close × is its own button so it can be activated independently and have
   its own focus ring. Reset native button look. */
.ll-chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--close-size);
  height: var(--close-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.ll-chip__close svg { width: 70%; height: 70%; display: block; }
.ll-chip__close:hover { background: rgba(0, 0, 0, 0.08); }
.ll-chip__close:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--color-brand-500); }

/* ---------- Colors ---------- */
.ll-chip[data-color="white"] {
  --bg: var(--color-white);
  --bg-hover: var(--color-neutral-25);
  --bg-active: var(--color-neutral-50);
  --border: var(--color-neutral-300);
  --border-active: var(--color-neutral-300);
  --label: var(--color-neutral-800);
}
.ll-chip[data-color="grey"] {
  --bg: var(--color-neutral-50);
  --bg-hover: var(--color-neutral-100);
  --bg-active: var(--color-neutral-100);
  --border: var(--color-neutral-300);
  --border-active: var(--color-neutral-300);
  --label: var(--color-neutral-950);
}
.ll-chip[data-color="brand"] {
  --bg: var(--color-brand-50);
  --bg-hover: var(--color-brand-100);
  --bg-active: var(--color-brand-100);
  --border: var(--color-brand-200);
  --border-active: var(--color-brand-200);
  --label: var(--color-brand-800);
}
.ll-chip[data-color="success"] {
  --bg: var(--color-success-50);
  --bg-hover: var(--color-success-100);
  --bg-active: var(--color-success-100);
  --border: var(--color-success-100);
  --border-active: var(--color-success-200);
  --label: var(--color-success-800);
}
.ll-chip[data-color="error"] {
  --bg: var(--color-error-50);
  --bg-hover: var(--color-error-100);
  --bg-active: var(--color-error-100);
  --border: var(--color-error-100);
  --border-active: var(--color-error-200);
  --label: var(--color-error-800);
}
.ll-chip[data-color="warning"] {
  --bg: var(--color-warning-50);
  --bg-hover: var(--color-warning-100);
  --bg-active: var(--color-warning-100);
  --border: var(--color-warning-100);
  --border-active: var(--color-warning-200);
  --label: var(--color-warning-800);
}
.ll-chip[data-color="pear"] {
  --bg: var(--color-pear-50);
  --bg-hover: var(--color-pear-100);
  --bg-active: var(--color-pear-100);
  --border: var(--color-pear-100);
  --border-active: var(--color-pear-200);
  --label: var(--color-pear-800);
}
.ll-chip[data-color="prune"] {
  --bg: var(--color-prune-50);
  --bg-hover: var(--color-prune-100);
  --bg-active: var(--color-prune-100);
  --border: var(--color-prune-100);
  --border-active: var(--color-prune-200);
  --label: var(--color-prune-800);
}
.ll-chip[data-color="mango"] {
  --bg: var(--color-mango-50);
  --bg-hover: var(--color-mango-100);
  --bg-active: var(--color-mango-100);
  --border: var(--color-mango-100);
  --border-active: var(--color-mango-200);
  --label: var(--color-mango-800);
}

/* ---------- Disabled ---------- */
.ll-chip:disabled,
.ll-chip[aria-disabled="true"],
.ll-chip[data-state="disabled"] {
  --bg: var(--color-neutral-50);
  --bg-hover: var(--color-neutral-50);
  --bg-active: var(--color-neutral-50);
  --border: var(--color-neutral-100);
  --label: var(--color-neutral-300);
  background: var(--bg);
  border-color: var(--border);
  color: var(--label);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-chip,
  .ll-chip__close { transition: none !important; }
}