/* ==========================================================================
   aimendev design system — primitives (P2)
   Every rule uses semantic aliases from tokens.css. No raw colour, no magic px
   beyond the token scale. States required per component:
   default / hover / focus-visible / active / disabled / (loading, invalid)
   ========================================================================== */

/* --- hidden attribute ------------------------------------------------------- */
/* A component rule that sets `display` silently overrides the `hidden` attribute,
   so error messages and empty states stay visible. Restore it globally. */
[hidden] { display: none !important; }

/* --- button --------------------------------------------------------------- */
.ds-btn {
  --btn-h: 38px; --btn-px: var(--space-4); --btn-fs: var(--text-base);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: 600 var(--btn-fs)/1 var(--font-sans); letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ds-btn:active:not(:disabled) { transform: translateY(1px); }
.ds-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ds-btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; transform: none; border-style: dashed; }

.ds-btn--primary { background: var(--accent); color: var(--accent-fg); }
.ds-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.ds-btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--panel-hover); }

.ds-btn--soft { background: var(--accent-soft); color: var(--accent); }
.ds-btn--soft:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }

.ds-btn--danger { background: var(--danger); color: #fff; }
.ds-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, var(--gray-950)); }

.ds-btn--sm { --btn-h: 32px; --btn-px: var(--space-3); --btn-fs: var(--text-sm); border-radius: var(--radius-sm); }
.ds-btn--lg { --btn-h: 44px; --btn-px: var(--space-5); --btn-fs: var(--text-md); border-radius: var(--radius-lg); }

.ds-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.ds-btn--loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: var(--accent-fg);
  animation: ds-spin 620ms linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* --- inputs --------------------------------------------------------------- */
.ds-input, .ds-textarea, .ds-select {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: 400 var(--text-base)/1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-input, .ds-select { height: 38px; padding: 0 var(--space-3); }
.ds-textarea { min-height: 88px; padding: var(--space-2) var(--space-3) var(--space-4); resize: vertical; }
.ds-select { appearance: none; padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-faint); }
.ds-input:hover:not(:disabled), .ds-textarea:hover:not(:disabled), .ds-select:hover:not(:disabled) { border-color: var(--border-strong); }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus,
.ds-input.is-focus, .ds-textarea.is-focus, .ds-select.is-focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled,
.ds-input.is-disabled, .ds-textarea.is-disabled, .ds-select.is-disabled {
  opacity: .7; cursor: not-allowed; background: var(--bg-subtle); color: var(--text-muted);
}
.ds-input.is-invalid, .ds-textarea.is-invalid, .ds-select.is-invalid {
  border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

/* --- checkbox / radio / switch ------------------------------------------- */
.ds-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-base); }
.ds-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-check .box {
  width: 18px; height: 18px; flex: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); background: var(--panel);
  display: grid; place-items: center; transition: all var(--dur-fast) var(--ease-out);
}
.ds-check .box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--accent-fg);
  border-bottom: 2px solid var(--accent-fg); transform: rotate(-45deg) scale(.6); opacity: 0; transition: all var(--dur-fast) var(--ease-out); }
.ds-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.ds-check input:checked + .box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.ds-check input:focus-visible + .box { box-shadow: 0 0 0 3px var(--ring); }
.ds-check input:disabled ~ * { opacity: .5; }

.ds-check--radio .box { border-radius: var(--radius-full); }
.ds-check--radio .box::after { width: 7px; height: 7px; border: none; border-radius: var(--radius-full); background: var(--accent-fg); transform: scale(.5); }
.ds-check--radio input:checked + .box::after { transform: scale(1); }

.ds-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-base); }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch .track { width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--border-strong);
  position: relative; transition: background var(--dur-base) var(--ease-out); flex: none; }
.ds-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out); }
.ds-switch input:checked + .track { background: var(--accent); }
.ds-switch input:checked + .track::after { transform: translateX(16px); }
.ds-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--ring); }
.ds-switch input:disabled + .track { opacity: .45; }

/* --- field wrapper -------------------------------------------------------- */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field > label { font: 500 var(--text-xs)/1.4 var(--font-sans); color: var(--text-muted); display: flex; gap: 4px; }
.ds-field .req { color: var(--danger); }
.ds-field .hint { font-size: var(--text-xs); color: var(--text-faint); }
.ds-field .error { font-size: var(--text-xs); color: var(--danger); display: flex; align-items: center; gap: 4px; }

/* --- badge / tag / avatar ------------------------------------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--panel-hover); color: var(--text-muted);
  font: 500 var(--text-2xs)/1.6 var(--font-mono); letter-spacing: .02em;
}
.ds-badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ds-badge--success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: transparent; }
.ds-badge--warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); border-color: transparent; }
.ds-badge--danger  { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border-color: transparent; }
.ds-badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

.ds-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); font-size: var(--text-xs); }
.ds-tag button { all: unset; cursor: pointer; color: var(--text-faint); font-size: 13px; line-height: 1; }
.ds-tag button:hover { color: var(--text); }

.ds-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 600 var(--text-xs)/1 var(--font-sans);
  border: 1px solid var(--border); flex: none; overflow: hidden; }
.ds-avatar--lg { width: 44px; height: 44px; font-size: var(--text-sm); }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar-group { display: inline-flex; }
.ds-avatar-group .ds-avatar + .ds-avatar { margin-left: -10px; }

/* --- card ----------------------------------------------------------------- */
.ds-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ds-card--outline { box-shadow: none; }
.ds-card--interactive { transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor: pointer; }
.ds-card--interactive:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ds-card__head { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.ds-card__body { padding: var(--space-4); }
.ds-card__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* --- tooltip / toast ------------------------------------------------------ */
.ds-tooltip { position: relative; display: inline-flex; }
.ds-tooltip .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--gray-900); color: var(--gray-50); padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-md); z-index: 5;
}
.ds-tooltip:hover .tip, .ds-tooltip:focus-within .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.ds-toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-width: 380px; }
.ds-toast strong { display: block; font-size: var(--text-base); margin-bottom: 2px; }
.ds-toast .mark { flex: none; width: 18px; height: 18px; border-radius: var(--radius-full); display: grid;
  place-items: center; font: 700 11px/1 var(--font-mono); background: color-mix(in srgb, currentColor 18%, transparent); }
.ds-toast--success .mark { color: var(--success); }
.ds-toast--warning .mark { color: var(--warning); }
.ds-toast--danger .mark { color: var(--danger); }
.ds-toast p { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.ds-toast--success { border-left-color: var(--success); }
.ds-toast--warning { border-left-color: var(--warning); }
.ds-toast--danger  { border-left-color: var(--danger); }

/* --- table (primitive, full pattern in P3) -------------------------------- */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.ds-table th { text-align: left; font: 500 var(--text-2xs)/1.4 var(--font-mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.ds-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.ds-table tbody tr:hover { background: var(--panel-hover); }

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-card, .ds-switch .track, .ds-switch .track::after, .ds-tooltip .tip { transition: none; }
  .ds-btn--loading::after { animation-duration: 2s; }
}