/* ============================================================
   CCSentry — component interaction states.
   Components render with className hooks (cc-btn, cc-input-wrap, …);
   hover/active/focus/checked live here so the JSX stays declarative.
   Shipped to consumers via styles.css.
   ============================================================ */

/* ---- Button ---- */
.cc-btn:not(:disabled):hover { filter: brightness(0.97); }
.cc-btn[data-variant="primary"]:not(:disabled):hover { background: var(--brand-hover); border-color: var(--brand-hover); filter: none; }
.cc-btn[data-variant="primary"]:not(:disabled):active { background: var(--brand-active); border-color: var(--brand-active); }
.cc-btn[data-variant="secondary"]:not(:disabled):hover { background: var(--paper-100); border-color: var(--border-strong); filter: none; }
.cc-btn[data-variant="ghost"]:not(:disabled):hover { background: var(--paper-100); filter: none; }
.cc-btn[data-variant="danger"]:not(:disabled):hover { background: var(--red-700); border-color: var(--red-700); filter: none; }
.cc-btn:not(:disabled):active { transform: translateY(0.5px); }
.cc-btn:focus-visible { box-shadow: var(--ring); }

/* ---- Input / Select ---- */
.cc-input-wrap:focus-within { border-color: var(--border-brand) !important; box-shadow: var(--ring); }
.cc-input-wrap[data-invalid="true"]:focus-within { border-color: var(--status-fail) !important; box-shadow: 0 0 0 3px var(--status-fail-bg); }
.cc-select:hover { border-color: var(--border-strong); }
.cc-select:focus-visible { border-color: var(--border-brand); box-shadow: var(--ring); }

/* ---- Checkbox ---- */
.cc-checkbox:hover { border-color: var(--border-brand); }
.cc-checkbox:checked {
  background-color: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.cc-checkbox:focus-visible { box-shadow: var(--ring); }

/* ---- Tabs ---- */
.cc-tab:hover { color: var(--text-strong); }
.cc-tab:focus-visible { box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ---- Card hover (only when interactive) ---- */
.cc-card[data-interactive="true"] { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.cc-card[data-interactive="true"]:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }