/* Reusable BellerCreatives components. */
@media (prefers-color-scheme: dark) {
  .bc-modal,
  .bc-toast,
  .bc-sidebar,
  .bc-toolbar {
    color-scheme: dark;
  }
}

.bc-btn,
.btn {
  align-items: center;
  background: transparent;
  border: var(--bc-border-width) solid transparent;
  border-radius: var(--bc-radius-3);
  color: var(--bc-color-text);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--bc-font-sans);
  font-size: var(--bc-font-size-2);
  font-weight: 700;
  gap: var(--bc-space-2);
  justify-content: center;
  line-height: var(--bc-line-tight);
  min-height: var(--bc-control-height);
  padding: var(--bc-space-3) var(--bc-space-5);
  text-decoration: none;
  transition:
    background-color var(--bc-duration-base) var(--bc-ease-standard),
    border-color var(--bc-duration-base) var(--bc-ease-standard),
    color var(--bc-duration-base) var(--bc-ease-standard),
    box-shadow var(--bc-duration-base) var(--bc-ease-standard),
    transform var(--bc-duration-fast) var(--bc-ease-standard);
}

.bc-btn:hover,
.btn:hover {
  transform: translateY(calc(var(--bc-space-1) * -0.5));
}

.bc-btn:focus-visible,
.btn:focus-visible,
.bc-input:focus,
.bc-select:focus,
.bc-textarea:focus {
  box-shadow: var(--bc-shadow-focus);
  outline: none;
}

.bc-btn:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

.bc-btn-primary,
.btn-primary {
  background: var(--bc-color-accent);
  color: var(--bc-color-inverse);
}

.bc-btn-primary:hover,
.btn-primary:hover {
  background: var(--bc-color-accent-hover);
  color: var(--bc-color-inverse);
}

.bc-btn-secondary,
.bc-btn-outline,
.btn-outline {
  background: var(--bc-color-surface);
  border-color: var(--bc-color-border);
  color: var(--bc-color-text);
}

.bc-btn-secondary:hover,
.bc-btn-outline:hover,
.btn-outline:hover {
  border-color: var(--bc-color-accent);
  color: var(--bc-color-accent);
}

.btn-secondary {
  background: var(--bc-color-surface, #fff);
  border-color: var(--bc-color-accent, #315f72);
  color: var(--bc-color-accent, #315f72);
}

.btn-secondary:hover {
  background: var(--bc-color-accent-soft, rgba(49, 95, 114, 0.08));
  border-color: var(--bc-color-accent-hover, #244b5b);
  color: var(--bc-color-accent-hover, #244b5b);
}

.bc-btn-ghost,
.btn-ghost {
  background: transparent;
  color: var(--bc-color-text-muted);
}

.bc-btn-ghost:hover,
.btn-ghost:hover {
  background: var(--bc-color-accent-soft);
  color: var(--bc-color-accent);
}

.bc-btn-danger {
  background: var(--bc-color-danger);
  color: var(--bc-color-inverse);
}

.bc-btn-sm {
  font-size: var(--bc-font-size-1);
  min-height: var(--bc-control-height-sm);
  padding: var(--bc-space-2) var(--bc-space-3);
}

.bc-btn-lg,
.btn-large {
  font-size: var(--bc-font-size-3);
  min-height: var(--bc-control-height-lg);
  padding: var(--bc-space-4) var(--bc-space-7);
}

.bc-btn-block {
  width: 100%;
}

.bc-card,
.card,
.pillar,
.suite-card {
  background: var(--bc-color-surface);
  border: var(--bc-border-width) solid var(--bc-color-border);
  border-radius: var(--bc-radius-3);
  box-shadow: var(--bc-shadow-xs);
  color: var(--bc-color-text);
  padding: var(--bc-space-6);
}

.bc-card:hover,
.suite-card:hover {
  border-color: var(--bc-color-accent-muted);
  box-shadow: var(--bc-shadow-sm);
}

.bc-badge,
.bc-pill {
  align-items: center;
  border-radius: var(--bc-radius-pill);
  display: inline-flex;
  font-size: var(--bc-font-size-0);
  font-weight: 800;
  gap: var(--bc-space-1);
  letter-spacing: var(--bc-letter-caps);
  line-height: var(--bc-line-tight);
  padding: var(--bc-space-1) var(--bc-space-3);
  text-transform: uppercase;
}

.bc-badge {
  background: var(--bc-color-accent-soft);
  color: var(--bc-color-accent);
}

.bc-badge-live,
.bc-badge-success {
  background: var(--bc-color-success-soft);
  color: var(--bc-color-success);
}

.bc-badge-progress,
.bc-badge-warning,
.bc-badge-beta {
  background: var(--bc-color-warning-soft);
  color: var(--bc-color-warning);
}

.bc-badge-danger {
  background: var(--bc-color-danger-soft);
  color: var(--bc-color-danger);
}

.bc-input,
.bc-select,
.bc-textarea {
  background: var(--bc-color-surface);
  border: var(--bc-border-width) solid var(--bc-color-border);
  border-radius: var(--bc-radius-3);
  color: var(--bc-color-text);
  font: inherit;
  min-height: var(--bc-control-height);
  padding: var(--bc-space-3) var(--bc-space-4);
  transition:
    border-color var(--bc-duration-base) var(--bc-ease-standard),
    box-shadow var(--bc-duration-base) var(--bc-ease-standard);
  width: 100%;
}

.bc-textarea {
  min-height: calc(var(--bc-control-height-lg) * 2.5);
  resize: vertical;
}

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

.bc-modal {
  background: var(--bc-color-surface-raised);
  border: var(--bc-border-width) solid var(--bc-color-border);
  border-radius: var(--bc-radius-4);
  box-shadow: var(--bc-shadow-lg);
  color: var(--bc-color-text);
  max-width: var(--bc-layout-sm);
  padding: var(--bc-space-7);
  z-index: var(--bc-z-modal);
}

.bc-sidebar {
  background: var(--bc-color-bg-alt);
  border-color: var(--bc-color-border);
  color: var(--bc-color-text);
  padding: var(--bc-space-4);
}

.bc-toolbar {
  align-items: center;
  background: var(--bc-color-surface);
  border-color: var(--bc-color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
  padding: var(--bc-space-2) var(--bc-space-4);
}

.bc-progress-bar {
  background: var(--bc-color-bg-subtle);
  border-radius: var(--bc-radius-pill);
  height: var(--bc-space-2);
  overflow: hidden;
}

.bc-progress-fill,
.bc-progress-bar > span {
  background: var(--bc-color-accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--bc-duration-slow) var(--bc-ease-standard);
}

.bc-toast {
  background: var(--bc-color-surface-raised);
  border: var(--bc-border-width) solid var(--bc-color-border);
  border-radius: var(--bc-radius-3);
  box-shadow: var(--bc-shadow-md);
  color: var(--bc-color-text);
  padding: var(--bc-space-4) var(--bc-space-5);
  z-index: var(--bc-z-toast);
}

.bc-suite-hero {
  align-items: center;
  background: var(--bc-color-bg-alt);
  border-bottom: var(--bc-border-width) solid var(--bc-color-border);
  color: var(--bc-color-text-muted);
  display: flex;
  font-size: var(--bc-font-size-1);
  justify-content: space-between;
  padding: var(--bc-space-3) var(--bc-space-6);
}

.bc-suite-hero-label,
.bc-suite-breadcrumb {
  color: var(--bc-color-text-subtle);
  font-size: var(--bc-font-size-0);
  font-weight: 800;
  letter-spacing: var(--bc-letter-caps);
  text-transform: uppercase;
}

.bc-suite-name {
  color: var(--bc-color-accent);
  font-weight: 800;
}

.bc-suite-crossnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-5);
}

.bc-suite-crossnav a {
  color: var(--bc-color-text-muted);
  font-weight: 700;
  text-decoration: none;
}

.bc-suite-crossnav a:hover {
  color: var(--bc-color-accent);
}

.bc-form-group {
  margin-bottom: var(--bc-space-5);
}

.bc-form-group label {
  color: var(--bc-color-text);
  display: block;
  font-size: var(--bc-font-size-1);
  font-weight: 700;
  margin-bottom: var(--bc-space-2);
}

.bc-actions,
.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-3);
}

.bc-actions {
  border-top: var(--bc-border-width) solid var(--bc-color-border);
  justify-content: space-between;
  margin-top: var(--bc-space-7);
  padding-top: var(--bc-space-6);
}

.bc-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-3);
}

.bc-section {
  padding: var(--bc-space-10) var(--bc-space-6);
}

.bc-section-muted {
  background: var(--bc-color-bg-alt);
  border-bottom: var(--bc-border-width) solid var(--bc-color-border);
  border-top: var(--bc-border-width) solid var(--bc-color-border);
}

.bc-center {
  text-align: center;
}

.bc-grid {
  display: grid;
  gap: var(--bc-space-6);
}

.bc-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bc-auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.bc-kicker,
.section-label {
  color: var(--bc-color-accent);
  font-size: var(--bc-font-size-0);
  font-weight: 900;
  letter-spacing: var(--bc-letter-caps);
  text-transform: uppercase;
}

.bc-muted {
  color: var(--bc-color-text-muted);
}

.bc-link,
.suite-cta {
  color: var(--bc-color-accent);
  font-weight: 800;
  text-decoration: none;
}

.bc-link:hover,
.suite-cta:hover {
  color: var(--bc-color-accent-hover);
}

@media (max-width: 760px) {
  .bc-grid-2,
  .bc-grid-3,
  .bc-grid-4 {
    grid-template-columns: 1fr;
  }

  .bc-suite-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--bc-space-3);
  }
}