/* Crisp Showroom Light theme */
:root {
  --bg-primary: #fafaf9;
  --bg-secondary: #f5f5f4;
  --surface-card: rgba(255, 255, 255, 0.94);
  --surface-card-hover: #ffffff;
  --surface-subtle: #f5f5f4;
  --surface-border: rgba(28, 25, 23, 0.12);
  --text-main: #1c1917;
  --text-muted: #57534e;
  --accent-primary: #b45309;
  --accent-secondary: #92400e;
  --accent-text: #ffffff;
  --badge-bg: rgba(180, 83, 9, 0.10);
  --badge-text: #92400e;
  --input-bg: #ffffff;
  --input-border: rgba(28, 25, 23, 0.18);
  --glass-blur: 14px;
  --orb-1: rgba(245, 158, 11, 0.10);
  --orb-2: rgba(120, 113, 108, 0.08);
  --nav-bg: rgba(250, 250, 249, 0.92);
  --nav-active-bg: rgba(180, 83, 9, 0.10);
  --shadow-card: 0 10px 28px -10px rgba(28, 25, 23, 0.08);
  --shadow-hover: 0 18px 36px -12px rgba(28, 25, 23, 0.14);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

h1, h2, h3, .font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.theme-surface {
  background: var(--surface-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-card);
  transition: all 0.22s ease;
}

.theme-surface-hover:hover {
  background: var(--surface-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.theme-subcard {
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
}

.theme-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--badge-bg);
}

.theme-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--surface-border);
}

.nav-btn-active {
  color: var(--accent-primary);
  background: var(--nav-active-bg);
  font-weight: 600;
}

.theme-accent-btn {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--accent-text);
  font-weight: 700;
  transition: all 0.2s ease;
}

.theme-accent-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.theme-badge {
  background: var(--badge-bg);
  border: 1px solid var(--surface-border);
  color: var(--badge-text);
}

.ambient-orb-1 {
  background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%);
}

.ambient-orb-2 {
  background: radial-gradient(circle, var(--orb-2) 0%, transparent 70%);
}

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

.accent-text-color {
  color: var(--accent-primary);
}

.theme-divider {
  border-color: var(--surface-border);
}

.page-section {
  display: none;
  animation: fadeIn 0.28s ease-out;
}

.page-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Compatibility Enhancements */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (max-width: 640px) {
  .mobile-touch-btn {
    min-height: 44px;
  }
  #toastBanner {
    bottom: 4.75rem !important;
    left: 1rem;
    right: 1rem;
  }
}
body.inline-edit-mode [data-editable] {
  outline: 1.5px dashed #f59e0b;
  outline-offset: 3px;
  border-radius: 6px;
  cursor: text;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
}
body.inline-edit-mode [data-editable]:hover,
body.inline-edit-mode [data-editable]:focus {
  background-color: rgba(245, 158, 11, 0.12);
  outline: 2px solid #f59e0b;
}