/* ---------- Icon ---------- */
.sp-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-icon svg { display: block; width: 100%; height: 100%; }

/* ---------- Button ---------- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); font-family: var(--font-text); letter-spacing: var(--tracking-label); white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; transition: var(--transition-control); text-decoration: none; }
.sp-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.sp-btn[disabled], .sp-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.42; box-shadow: none; transform: none; }
.sp-btn--sm { height: 30px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.sp-btn--md { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.sp-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 700; }
.sp-btn--block { width: 100%; }

.sp-btn--primary { background: var(--velocity-500); color: #fff; box-shadow: var(--shadow-brand); }
.sp-btn--primary:hover:not([disabled]) { background: var(--velocity-600); }
.sp-btn--primary:active:not([disabled]) { background: var(--velocity-600); transform: translateY(2px); box-shadow: none; }
.sp-btn--primary:focus-visible { box-shadow: var(--shadow-brand), var(--ring-focus); }

.sp-btn--dark { background: var(--ink-900); color: var(--paper-050); box-shadow: 0 2px 0 0 #000; }
.sp-btn--dark:hover:not([disabled]) { background: var(--ink-800); }
.sp-btn--dark:active:not([disabled]) { transform: translateY(2px); box-shadow: none; }

.sp-btn--secondary { background: var(--paper-000); color: var(--ink-900); border-color: var(--ink-200); box-shadow: var(--shadow-1); }
.sp-btn--secondary:hover:not([disabled]) { border-color: var(--ink-300); background: var(--paper-050); }
.sp-btn--secondary:active:not([disabled]) { background: var(--paper-100); box-shadow: var(--shadow-inset-press); }

.sp-btn--ghost { background: transparent; color: var(--ink-700); }
.sp-btn--ghost:hover:not([disabled]) { background: var(--surface-hover); color: var(--ink-900); }
.sp-btn--ghost:active:not([disabled]) { background: var(--surface-press); }

.sp-btn--danger { background: var(--red-500); color: #fff; box-shadow: 0 2px 0 0 var(--red-600); }
.sp-btn--danger:hover:not([disabled]) { background: var(--red-600); }
.sp-btn--danger:active:not([disabled]) { transform: translateY(2px); box-shadow: none; }

.sp-btn--volt { background: var(--volt-500); color: var(--ink-900); box-shadow: 0 2px 0 0 var(--volt-600); }
.sp-btn--volt:hover:not([disabled]) { background: var(--volt-200); }
.sp-btn--volt:active:not([disabled]) { transform: translateY(2px); box-shadow: none; }

/* ---------- IconButton ---------- */
.sp-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink-600); cursor: pointer; transition: var(--transition-control); }
.sp-iconbtn:hover:not([disabled]) { background: var(--surface-hover); color: var(--ink-900); }
.sp-iconbtn:active:not([disabled]) { background: var(--surface-press); }
.sp-iconbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.sp-iconbtn[disabled] { opacity: 0.42; cursor: not-allowed; }
.sp-iconbtn--sm { width: 28px; height: 28px; }
.sp-iconbtn--md { width: 34px; height: 34px; }
.sp-iconbtn--lg { width: 40px; height: 40px; }
.sp-iconbtn--outline { border-color: var(--ink-200); background: var(--paper-000); box-shadow: var(--shadow-1); }
.sp-iconbtn--outline:hover:not([disabled]) { border-color: var(--ink-300); background: var(--paper-050); }
.sp-iconbtn--solid { background: var(--ink-900); color: var(--paper-050); }
.sp-iconbtn--solid:hover:not([disabled]) { background: var(--ink-800); color: #fff; }
.sp-iconbtn--onDark { color: var(--ink-200); }
.sp-iconbtn--onDark:hover:not([disabled]) { background: rgba(255,255,255,0.1); color: #fff; }
.sp-iconbtn--round { border-radius: var(--radius-full); }

/* ---------- Badge ---------- */
.sp-badge { display: inline-flex; align-items: center; gap: var(--space-3); height: 22px; padding: 0 9px; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.sp-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.sp-badge--neutral { background: var(--ink-050); color: var(--ink-600); }
.sp-badge--published { background: var(--status-published-bg); color: var(--green-600); }
.sp-badge--scheduled { background: var(--status-scheduled-bg); color: var(--blue-600); }
.sp-badge--draft { background: var(--ink-050); color: var(--ink-500); }
.sp-badge--review { background: var(--status-needs-review-bg); color: var(--amber-600); }
.sp-badge--failed { background: var(--status-failed-bg); color: var(--red-600); }
.sp-badge--brand { background: var(--velocity-100); color: var(--velocity-700); }
.sp-badge--live { background: var(--ink-900); color: var(--volt-500); }

/* ---------- Tag ---------- */
.sp-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--paper-100); border: 1px solid var(--ink-100); color: var(--ink-700); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-body); }
.sp-tag--selected { background: var(--velocity-050); border-color: var(--velocity-200); color: var(--velocity-700); }
.sp-tag--clickable { cursor: pointer; transition: var(--transition-control); }
.sp-tag--clickable:hover { border-color: var(--ink-300); }
.sp-tag__remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 0; padding: 0; background: transparent; color: var(--ink-400); cursor: pointer; border-radius: 3px; }
.sp-tag__remove:hover { color: var(--ink-900); background: var(--surface-press); }

/* ---------- Avatar ---------- */
.sp-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; border-radius: var(--radius-full); background: var(--ink-800); color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; overflow: visible; }
.sp-avatar__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.sp-avatar--square { border-radius: var(--radius-sm); }
.sp-avatar--xs { width: 20px; height: 20px; font-size: 9px; }
.sp-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.sp-avatar--md { width: 34px; height: 34px; font-size: 13px; }
.sp-avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.sp-avatar__badge { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--paper-000); }