@import url("/src/styles/theme.css");
@import url("/styles.css");

/* Placeholder page shell using existing DS tokens */

body.bb-app {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif);
  line-height: var(--type-body-line, 1.5);
}

.bb-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--ds-space-7, 2rem) var(--ds-space-5, 1.5rem) var(--ds-space-9, 3rem);
}

.bb-page h1 {
  font-size: var(--type-title-size, 2rem);
  line-height: var(--type-title-line, 1.2);
  margin-bottom: var(--ds-space-3, 0.75rem);
}

.bb-page p {
  font-size: var(--type-body-size, 0.95rem);
  color: var(--text-muted, var(--ds-text-secondary, #9ca3af));
}

.bb-placeholder-card {
  margin-top: var(--ds-space-6, 1.5rem);
  padding: var(--ds-space-6, 1.5rem);
  border-radius: var(--radius-lg, 16px);
  background: var(--card, var(--ds-surface-2, rgba(15, 23, 42, 0.9)));
  border: 1px solid var(--border, var(--ds-border-subtle, rgba(148, 163, 184, 0.35)));
  box-shadow: var(--shadow-card, 0 18px 45px rgba(15, 23, 42, 0.55));
}

.bb-placeholder-card p {
  margin: 0;
  color: var(--ds-text-primary, #e5e7eb);
}

@media (max-width: 768px) {
  .bb-page {
    padding: var(--ds-space-6, 1.5rem) var(--ds-space-4, 1rem) var(--ds-space-8, 2.25rem);
  }
}