/*
 * Bookvaib shared visual foundation.
 * Loaded after each page's local stylesheet so the dashboard and static tools
 * share the same contrast, surfaces, focus states, and motion.
 */
:root {
  --bv-bg: #090d16;
  --bv-surface: #101722;
  --bv-surface-raised: #141e2b;
  --bv-surface-soft: #0d1520;
  --bv-border: #1e293b;
  --bv-border-strong: #334155;
  --bv-text: #f8fafc;
  --bv-text-soft: #cbd5e1;
  --bv-text-muted: #94a3b8;
  --bv-text-faint: #64748b;
  --bv-accent: #a5b4fc;
  --bv-accent-strong: #6366f1;
  --bv-accent-glow: rgba(99, 102, 241, .2);
  --bv-success: #34d399;
  --bv-radius: 14px;
  --bv-shadow: 0 16px 40px rgba(2, 6, 23, .2);
}

html[data-bv-theme="light"] {
  --bv-bg: #f8fafc;
  --bv-surface: #ffffff;
  --bv-surface-raised: #ffffff;
  --bv-surface-soft: #f1f5f9;
  --bv-border: #cbd5e1;
  --bv-border-strong: #94a3b8;
  --bv-text: #0f172a;
  --bv-text-soft: #1e293b;
  --bv-text-muted: #334155;
  --bv-text-faint: #475569;
  --bv-accent: #3730a3;
  --bv-accent-strong: #4f46e5;
  --bv-accent-glow: rgba(79, 70, 229, .16);
  --bv-shadow: 0 16px 40px rgba(15, 23, 42, .1);
}

html,
body {
  background: var(--bv-bg) !important;
  color: var(--bv-text) !important;
}

body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: -.01em;
  background-image: radial-gradient(circle at 8% -10%, var(--bv-accent-glow), transparent 28%) !important;
}

/* Shared shell */
.nav {
  background: color-mix(in srgb, var(--bv-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--bv-border) !important;
  backdrop-filter: blur(18px);
}

.nav-brand,
.logo,
.nav a {
  color: var(--bv-text) !important;
  font-weight: 800 !important;
}

.nav-brand span,
.logo span {
  color: var(--bv-accent) !important;
}

.nav-brand,
.logo {
  letter-spacing: -.045em !important;
}

.back-btn,
.nav-back,
.nav-cta {
  color: var(--bv-accent) !important;
  border-color: var(--bv-border-strong) !important;
}

.bv-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  margin-left: 6px;
  border: 1px solid var(--bv-border-strong);
  border-radius: 9px;
  background: var(--bv-surface-soft);
  color: var(--bv-text-soft);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.bv-theme-toggle:hover,
.bv-theme-toggle:focus-visible {
  border-color: var(--bv-accent-strong);
  color: var(--bv-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--bv-accent-glow);
  outline: none;
}

/* Contrast-safe text roles. These selectors cover the standalone HTML tools. */
h1, h2, h3, h4, h5, h6,
.sec-hd, .page-title, .page-head h1, .hero-greeting,
.tool-name, .tool-link-name, .tools-title, .projects-title,
.auth-title, .modal-title, .card-title, .section-title,
.size-title, .feature-title, .result-title {
  color: var(--bv-text) !important;
  font-weight: 700 !important;
}

.sec-hd,
.page-title,
.page-head h1,
.hero-greeting {
  letter-spacing: -.045em;
  line-height: 1.04;
}

.tier-title,
.catalog-title {
  color: var(--bv-text) !important;
  font-weight: 800 !important;
}

.catalog-copy {
  color: var(--bv-text-soft) !important;
}

.catalog-kicker {
  color: var(--bv-accent) !important;
}

p, label, small,
.sec-sub, .page-sub, .page-hint, .hero p, .hero-sub,
.tool-desc, .tool-link-cost, .projects-empty, .auth-sub,
.login-gate-sub, .modal-field-lbl, .modal-section-title,
.wallet-label, .cost-note, .hint, .muted, .subtitle,
.section-label, .tool-meta, .card-subtitle {
  color: var(--bv-text-muted) !important;
}

strong, b {
  color: var(--bv-text-soft);
}

/* Shared surfaces. */
.card, .tools-card, .projects-card, .wallet-card, .auth-card,
.login-gate, .modal, .plan-bar, .tool-card, .tool-link,
.bundle-card, .project-row, .result-card, .section-card,
.interior-card, .hero-card, .dropzone {
  background: var(--bv-surface) !important;
  border-color: var(--bv-border) !important;
}

.tool-card, .tool-link, .bundle-card, .project-row, .section-card {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.tool-card:hover, .tool-link:hover, .bundle-card:hover, .section-card:hover {
  border-color: var(--bv-accent-strong) !important;
  box-shadow: var(--bv-shadow), 0 0 0 1px var(--bv-accent-glow);
  transform: translateY(-4px) !important;
}

.tool-card,
.dashboard-category,
.hero-card,
.tools-card,
.plan-bar {
  animation: bv-rise .52s cubic-bezier(.2, .8, .2, 1) both;
}

.tool-grid .tool-card:nth-child(2n),
.dashboard-tool-grid .dashboard-category:nth-child(2n) {
  animation-delay: .06s;
}

@keyframes bv-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inputs stay readable in either mode and get a clear keyboard ring. */
input, textarea, select,
.txt-inp, .txt-area, .sel-inp, .modal-inp {
  background: var(--bv-surface-soft) !important;
  color: var(--bv-text) !important;
  border-color: var(--bv-border-strong) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--bv-text-faint) !important;
  opacity: 1;
}

input:focus, textarea:focus, select:focus,
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--bv-accent-glow) !important;
  outline-offset: 2px;
}

.primary, .gen-btn, .hero-action-btn, .bundle-btn, .modal-btn,
.login-btn, .plan-bar-btn, .nav-cta {
  font-weight: 700 !important;
}

@media (max-width: 600px) {
  .bv-theme-toggle {
    width: 34px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}