/* ============================================================
   ScriptTonic Design System V1 — Component Primitives
   Dark-first. Reusable st-* classes for later Stage 6 blocks.
   Bootstrap 5.3.3 coexistence: no destructive overrides.
   ============================================================ */

/* === BUTTONS === */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2);
  min-height: var(--st-control-height-md);
  padding: var(--st-space-2) var(--st-space-4);
  font-family: var(--st-font-sans);
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--st-radius-md);
  cursor: pointer;
  transition: background-color var(--st-duration-fast) var(--st-easing-default),
              border-color var(--st-duration-fast) var(--st-easing-default),
              color var(--st-duration-fast) var(--st-easing-default),
              box-shadow var(--st-duration-fast) var(--st-easing-default);
  user-select: none;
  white-space: nowrap;
}

.st-btn:hover {
  text-decoration: none;
}

.st-btn:disabled,
.st-btn.st-disabled,
.st-btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--st-control-text-disabled);
  background-color: var(--st-control-disabled);
  border-color: var(--st-control-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}

.st-btn-primary {
  background-color: var(--st-brand);
  color: var(--st-text-inverse);
  border-color: var(--st-brand);
}

.st-btn-primary:hover {
  background-color: var(--st-brand-hover);
  border-color: var(--st-brand-hover);
  color: var(--st-text-inverse);
}

.st-btn-primary:active {
  background-color: var(--st-brand-active);
  border-color: var(--st-brand-active);
}

.st-btn-commerce { background-color: var(--st-commerce); color: var(--st-text-inverse); border-color: var(--st-commerce); }
.st-btn-commerce:hover { background-color: var(--st-commerce-hover); border-color: var(--st-commerce-hover); color: var(--st-text-inverse); }
.st-btn-commerce:active { background-color: var(--st-commerce-active); border-color: var(--st-commerce-active); }

.st-btn-commerce-secondary { background-color: transparent; color: var(--st-commerce); border-color: var(--st-commerce); }
.st-btn-commerce-secondary:hover { background-color: rgba(255, 122, 0, 0.1); color: var(--st-commerce-hover); border-color: var(--st-commerce-hover); }

.st-btn-interaction { background-color: var(--st-interaction); color: var(--st-text-inverse); border-color: var(--st-interaction); }
.st-btn-interaction:hover { background-color: var(--st-interaction-hover); border-color: var(--st-interaction-hover); color: var(--st-text-inverse); }
.st-btn-interaction:active { background-color: var(--st-interaction-active); border-color: var(--st-interaction-active); }

.st-btn-secondary {
  background-color: var(--st-surface-elevated);
  color: var(--st-text);
  border-color: var(--st-border);
}

.st-btn-secondary:hover {
  background-color: var(--st-control-hover);
  border-color: var(--st-border-strong);
  color: var(--st-text);
}

.st-btn-ghost {
  background-color: transparent;
  color: var(--st-text);
  border-color: transparent;
}

.st-btn-ghost:hover {
  background-color: var(--st-surface-elevated);
  color: var(--st-text);
}

.st-btn-danger {
  background-color: var(--st-danger);
  color: var(--st-text-inverse);
  border-color: var(--st-danger);
}

.st-btn-danger:hover {
  background-color: var(--st-danger-hover);
  border-color: var(--st-danger-hover);
  color: var(--st-text-inverse);
}

.st-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--st-touch-target);
  min-height: var(--st-touch-target);
  padding: var(--st-space-2);
  background-color: transparent;
  color: var(--st-text);
  border: 1px solid transparent;
  border-radius: var(--st-radius-md);
  cursor: pointer;
  transition: background-color var(--st-duration-fast) var(--st-easing-default);
}

.st-btn-icon:hover {
  background-color: var(--st-surface-elevated);
  color: var(--st-text);
}

/* Bootstrap compatibility inside explicitly dark ScriptTonic surfaces. */
:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard) .btn:disabled,
:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard) .btn.disabled {
  opacity: 1;
  color: var(--st-control-text-disabled);
  background-color: var(--st-control-disabled);
  border-color: var(--st-control-disabled-border);
}

:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard) .btn-outline-secondary {
  color: var(--st-text);
  border-color: var(--st-border-strong);
}

:where(.st-dark-surface, .st-product-page, .st-community-page, .st-developer-page, .dashboard) .btn-outline-secondary:hover {
  color: var(--st-text);
  background-color: var(--st-control-hover);
  border-color: var(--st-border-strong);
}

/* === FORM CONTROLS === */
.st-input,
.st-textarea,
.st-select {
  display: block;
  width: 100%;
  padding: var(--st-space-2) var(--st-space-3);
  font-family: var(--st-font-sans);
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-regular);
  line-height: var(--st-leading-normal);
  color: var(--st-control-text);
  background-color: var(--st-control-bg);
  border: 1px solid var(--st-control-border);
  border-radius: var(--st-radius-md);
  transition: border-color var(--st-duration-fast) var(--st-easing-default),
              box-shadow var(--st-duration-fast) var(--st-easing-default);
  appearance: none;
}

.st-input::placeholder,
.st-textarea::placeholder {
  color: var(--st-text-subtle);
}

.st-input:focus,
.st-textarea:focus,
.st-select:focus {
  outline: none;
  border-color: var(--st-control-focus);
  box-shadow: var(--st-focus-ring);
}

.st-input:disabled,
.st-textarea:disabled,
.st-select:disabled {
  background-color: var(--st-control-disabled);
  color: var(--st-control-text-disabled);
  cursor: not-allowed;
}

.st-textarea {
  min-height: 80px;
  resize: vertical;
}

.st-select {
  padding-inline-end: var(--st-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0B0C3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--st-space-3) center;
}

[dir="rtl"] .st-select {
  background-position: left var(--st-space-3) center;
}

/* === CHOICE CONTROLS === */
.st-checkbox,
.st-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  font-size: var(--st-text-sm);
  color: var(--st-text);
  cursor: pointer;
}

.st-checkbox input[type="checkbox"],
.st-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--st-interaction);
  cursor: pointer;
}

.st-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  font-size: var(--st-text-sm);
  color: var(--st-text);
  cursor: pointer;
}

.st-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background-color: var(--st-border);
  border-radius: var(--st-radius-full);
  transition: background-color var(--st-duration-fast) var(--st-easing-default);
}

.st-switch-track::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--st-duration-fast) var(--st-easing-default);
}

.st-switch input:checked + .st-switch-track {
  background-color: var(--st-interaction);
}

.st-switch input:checked + .st-switch-track::after {
  transform: translateX(18px);
}

[dir="rtl"] .st-switch input:checked + .st-switch-track::after {
  transform: translateX(-18px);
}

.st-switch input:focus-visible + .st-switch-track {
  box-shadow: var(--st-focus-ring);
}

.st-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* === SURFACES === */
.st-card {
  background-color: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  padding: var(--st-space-4);
}

.st-card-elevated {
  background-color: var(--st-surface-elevated);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  padding: var(--st-space-4);
  box-shadow: var(--st-shadow-sm);
}

.st-page-canvas { background-color: var(--st-canvas); color: var(--st-text); }
.st-panel { background-color: var(--st-surface-primary); color: var(--st-text); border: 1px solid var(--st-border); }
.st-panel-secondary { background-color: var(--st-surface-secondary); color: var(--st-text); border: 1px solid var(--st-border); }
.st-control-surface { background-color: var(--st-surface-control); color: var(--st-control-text); border: 1px solid var(--st-control-border); }
.st-table-surface,
.st-form-surface { background-color: var(--st-surface-table); color: var(--st-text); border: 1px solid var(--st-border); }
.st-empty-surface { background-color: var(--st-surface-empty); color: var(--st-text-muted); border: 1px solid var(--st-border); }

/* Semantic framing shared by public and authenticated ScriptTonic surfaces. */
.st-accent-edge {
  border-inline-start: 2px solid var(--st-accent-edge-color, var(--st-border-strong));
}

.st-accent-commerce { --st-accent-edge-color: var(--st-commerce); }
.st-accent-interaction { --st-accent-edge-color: var(--st-interaction); }
.st-accent-warm { --st-accent-edge-color: var(--st-warm-accent); }

.st-section-eyebrow {
  color: var(--st-commerce);
  font-size: var(--st-text-xs);
  font-weight: var(--st-font-bold);
  letter-spacing: 0.14em;
  line-height: var(--st-leading-tight);
  text-transform: uppercase;
}

.st-interactive-surface {
  transition: border-color var(--st-duration-fast) var(--st-easing-default),
              background-color var(--st-duration-fast) var(--st-easing-default),
              transform var(--st-duration-fast) var(--st-easing-default);
}

.st-interactive-surface:hover {
  border-color: var(--st-border-strong);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .st-interactive-surface {
    transition: none;
  }

  .st-interactive-surface:hover {
    transform: none;
  }
}

/* === BADGES === */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-1);
  padding: 2px var(--st-space-2);
  font-size: var(--st-text-xs);
  font-weight: var(--st-font-medium);
  line-height: 1.4;
  border-radius: var(--st-radius-sm);
  background-color: var(--st-surface-elevated);
  color: var(--st-text-muted);
  border: 1px solid var(--st-border);
}

.st-badge-success {
  background-color: rgba(0, 200, 83, 0.15);
  color: var(--st-success);
  border-color: rgba(0, 200, 83, 0.3);
}

.st-badge-warning {
  background-color: rgba(255, 179, 0, 0.15);
  color: var(--st-warning);
  border-color: rgba(255, 179, 0, 0.3);
}

.st-badge-danger {
  background-color: rgba(255, 61, 0, 0.15);
  color: var(--st-danger);
  border-color: rgba(255, 61, 0, 0.3);
}

.st-badge-info {
  background-color: rgba(0, 179, 255, 0.15);
  color: var(--st-interaction);
  border-color: rgba(0, 179, 255, 0.3);
}

.st-badge-brand {
  background-color: rgba(255, 122, 0, 0.15);
  color: var(--st-brand);
  border-color: rgba(255, 122, 0, 0.3);
}

/* === ALERTS === */
.st-alert {
  display: flex;
  gap: var(--st-space-3);
  padding: var(--st-space-3) var(--st-space-4);
  font-size: var(--st-text-sm);
  line-height: var(--st-leading-normal);
  border-radius: var(--st-radius-md);
  border: 1px solid var(--st-border);
  background-color: var(--st-surface-elevated);
  color: var(--st-text);
}

.st-alert-success {
  border-color: rgba(0, 200, 83, 0.3);
  background-color: rgba(0, 200, 83, 0.08);
}

.st-alert-warning {
  border-color: rgba(255, 179, 0, 0.3);
  background-color: rgba(255, 179, 0, 0.08);
}

.st-alert-danger {
  border-color: rgba(255, 61, 0, 0.3);
  background-color: rgba(255, 61, 0, 0.08);
}

.st-alert-info {
  border-color: rgba(0, 179, 255, 0.3);
  background-color: rgba(0, 179, 255, 0.08);
}

/* === TABLES === */
.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--st-text-sm);
  color: var(--st-text);
}

.st-table th,
.st-table td {
  padding: var(--st-space-3) var(--st-space-4);
  text-align: start;
  border-block-end: 1px solid var(--st-border);
}

.st-table th {
  font-weight: var(--st-font-semibold);
  color: var(--st-text-muted);
  background-color: var(--st-surface);
}

.st-table tbody tr:hover {
  background-color: var(--st-surface-elevated);
}

/* === TABS === */
.st-tabs {
  display: flex;
  gap: var(--st-space-1);
  border-block-end: 1px solid var(--st-border);
  overflow-x: auto;
}

.st-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2);
  min-height: var(--st-touch-target);
  padding: var(--st-space-2) var(--st-space-4);
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-medium);
  color: var(--st-text-muted);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: color var(--st-duration-fast) var(--st-easing-default),
              border-color var(--st-duration-fast) var(--st-easing-default);
}

.st-tab:hover {
  color: var(--st-text);
  text-decoration: none;
}

.st-tab.active {
  color: var(--st-interaction);
  border-block-end-color: var(--st-interaction);
}

.st-tab:focus-visible { outline: 2px solid var(--st-focus-color); outline-offset: -2px; box-shadow: var(--st-focus-ring); }

.st-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding-inline: var(--st-space-1);
  border-radius: var(--st-radius-full);
  background-color: var(--st-surface-overlay);
  color: var(--st-text-muted);
  font-size: var(--st-text-xs);
}

/* === PAGINATION === */
.st-pagination {
  display: flex;
  gap: var(--st-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.st-pagination .st-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--st-touch-target);
  height: var(--st-touch-target);
  padding: 0 var(--st-space-2);
  font-size: var(--st-text-sm);
  font-weight: var(--st-font-medium);
  color: var(--st-text-muted);
  text-decoration: none;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  transition: background-color var(--st-duration-fast) var(--st-easing-default),
              color var(--st-duration-fast) var(--st-easing-default),
              border-color var(--st-duration-fast) var(--st-easing-default);
}

.st-pagination .st-page-link:hover {
  background-color: var(--st-surface-elevated);
  color: var(--st-text);
  text-decoration: none;
}

.st-pagination .st-page-link.active {
  background-color: var(--st-brand);
  color: var(--st-text-inverse);
  border-color: var(--st-brand);
}

.st-pagination .st-page-link.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* === DROPDOWN === */
.st-dropdown {
  position: relative;
  display: inline-block;
}

.st-dropdown-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--st-z-dropdown);
  min-width: 180px;
  padding: var(--st-space-1);
  margin-block-start: var(--st-space-1);
  background-color: var(--st-surface-elevated);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-lg);
  display: none;
}

.st-dropdown.open .st-dropdown-menu {
  display: block;
}

.st-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--st-space-2);
  padding: var(--st-space-2) var(--st-space-3);
  font-size: var(--st-text-sm);
  color: var(--st-text);
  text-decoration: none;
  border-radius: var(--st-radius-sm);
  transition: background-color var(--st-duration-fast) var(--st-easing-default);
}

.st-dropdown-item:hover {
  background-color: var(--st-control-hover);
  text-decoration: none;
  color: var(--st-text);
}

.st-dropdown-toggle,
.st-control-toggle { color: var(--st-control-text); }

.st-dropdown-toggle :where(i, svg),
.st-control-toggle :where(i, svg) { color: currentColor; }

.st-dropdown-menu :where(button, a, .dropdown-item) { color: var(--st-text); }

/* === MODAL === */
.st-modal {
  position: fixed;
  inset: 0;
  z-index: var(--st-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--st-space-4);
}

.st-modal.open {
  display: flex;
}

.st-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.st-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--st-surface-elevated);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  box-shadow: var(--st-shadow-lg);
}

.st-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--st-space-4);
  border-block-end: 1px solid var(--st-border);
}

.st-modal-body {
  padding: var(--st-space-4);
}

.st-modal-footer {
  display: flex;
  gap: var(--st-space-2);
  justify-content: flex-end;
  padding: var(--st-space-4);
  border-block-start: 1px solid var(--st-border);
}

/* === TOOLTIP === */
.st-tooltip {
  position: relative;
}

.st-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: var(--st-space-1) var(--st-space-2);
  font-size: var(--st-text-xs);
  font-weight: var(--st-font-medium);
  color: var(--st-text);
  background-color: var(--st-surface-overlay);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--st-duration-fast) var(--st-easing-default);
}

.st-tooltip:hover::after,
.st-tooltip:focus-visible::after {
  opacity: 1;
}

/* === SKELETON === */
.st-skeleton {
  background: linear-gradient(90deg, var(--st-surface-elevated) 25%, var(--st-surface-overlay) 50%, var(--st-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: st-skeleton-pulse 1.5s infinite;
  border-radius: var(--st-radius-sm);
}

@keyframes st-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === EMPTY STATE === */
.st-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--st-space-12) var(--st-space-4);
  color: var(--st-text-muted);
}

.st-empty-state-icon {
  font-size: var(--st-text-4xl);
  color: var(--st-text-subtle);
  margin-block-end: var(--st-space-4);
}

.st-empty-state-title {
  font-size: var(--st-text-lg);
  font-weight: var(--st-font-semibold);
  color: var(--st-text);
  margin-block-end: var(--st-space-2);
}

.st-empty-state-text {
  font-size: var(--st-text-sm);
  color: var(--st-text-muted);
  max-width: 400px;
}

/* === ERROR STATE === */
.st-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--st-space-12) var(--st-space-4);
}

.st-error-state-code {
  font-family: var(--st-font-mono);
  font-size: var(--st-text-4xl);
  font-weight: var(--st-font-bold);
  color: var(--st-danger);
  margin-block-end: var(--st-space-2);
}

.st-error-state-title {
  font-size: var(--st-text-lg);
  font-weight: var(--st-font-semibold);
  color: var(--st-text);
  margin-block-end: var(--st-space-2);
}

.st-error-state-text {
  font-size: var(--st-text-sm);
  color: var(--st-text-muted);
  max-width: 400px;
}

/* === ICON UTILITIES === */
.st-icon-sm { font-size: 1rem; }
.st-icon-md { font-size: 1.25rem; }
.st-icon-lg { font-size: 1.5rem; }

.st-icon-brand { color: var(--st-brand); }
.st-icon-interaction { color: var(--st-interaction); }
.st-icon-muted { color: var(--st-text-muted); }
.st-icon-success { color: var(--st-success); }
.st-icon-warning { color: var(--st-warning); }
.st-icon-danger { color: var(--st-danger); }

/* RTL icon flip helper */
[dir="rtl"] .st-rtl-flip {
  transform: scaleX(-1);
}