/* ============================================================
   LABBIE — DESIGN SYSTEM
   Homepage visual DNA applied globally.
   Geist 300/400/500 typography. Weightless. Calm. Premium.
   ============================================================ */

/* 0 ── GLOBAL TYPOGRAPHY DNA
   Kill all heavy weights. Force Geist/Inter 400 everywhere.
   Brand = 500, Slogan = 300, Everything else = 400.
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&display=swap');

/* ============================================================
   GLOBAL DESIGN TOKENS
   The Labbie theme is light-only: one unified theme on every
   device, regardless of OS/browser dark-mode preference.
   Components must consume these — no hardcoded hex anywhere.
   ============================================================ */
:root {
  color-scheme: light;

  /* Surfaces */
  --token-bg-primary:          #ffffff;
  --token-bg-secondary:        #f3f4f6;
  --token-surface-primary:     #ffffff;
  --token-surface-secondary:   #f9fafb;

  /* Text */
  --token-text-primary:        #111827;
  --token-text-secondary:      #374151;
  --token-text-muted:          #6b7280;
  --token-text-muted-2:        #9ca3af;

  /* Borders */
  --token-border:              rgba(0,0,0,0.06);
  --token-border-strong:       rgba(0,0,0,0.12);

  /* Avatar */
  --token-avatar-bg:           #111827;
  --token-avatar-color:        #ffffff;
  --token-avatar-user-bg:      #e5e7eb;

  /* Activity */
  --token-activity-dot:        #9ca3af;

  /* Cards / Thumbnails */
  --token-card-thumb:          #f3f4f6;
  --token-tmpl-thumb:          #f3f1ec;
  --token-card-icon-bg:        rgba(17,24,39,0.14);
  --token-card-icon-color:     rgba(17,24,39,0.65);

  /* Empty states */
  --token-empty-icon-bg:       rgba(17,24,39,0.10);
  --token-empty-icon-border:   rgba(17,24,39,0.18);
  --token-empty-icon-color:    rgba(17,24,39,0.70);

  /* Buttons — action (dark primary) */
  --token-btn-action-bg:       #101012;
  --token-btn-action-color:    #ffffff;

  /* Buttons — ghost secondary */
  --token-btn-ghost-bg:        #f3f4f6;
  --token-btn-ghost-hover:     rgba(17,24,39,0.20);

  /* Published websites open button */
  --token-pw-open-bg:          #f3f4f6;
  --token-pw-open-border:      rgba(0,0,0,0.06);

  /* Recycle bin */
  --token-rb-danger-bg:        rgba(17,24,39,0.10);
  --token-rb-danger-color:     #111827;
  --token-rb-danger-border:    rgba(17,24,39,0.25);

  /* Toolbar (WSE text editor) */
  --token-toolbar-bg:          #ffffff;
  --token-toolbar-border:      #d1d5db;
  --token-toolbar-text:        #374151;
  --token-toolbar-hover-bg:    #f3f4f6;
  --token-toolbar-active-bg:   #e5e7eb;
  --token-toolbar-input-bg:    #f9fafb;
  --token-toolbar-sep:         #d1d5db;

  /* Generation card */
  --token-gen-check-bg:        #e5e7eb;
  --token-gen-check-color:     #374151;

  /* Scrollbar */
  --token-scrollbar:           #f3f4f6;

  /* Template category pills */
  --token-cat-pill-bg:         rgba(17,24,39,0.06);
  --token-cat-pill-border:     rgba(17,24,39,0.14);
  --token-cat-active-bg:       #111827;
  --token-cat-active-color:    #ffffff;

  /* Mobile drawers */
  --token-mobile-sheet-bg:     #ffffff;
  --token-mobile-bar-bg:       #ffffff;

  /* Credit bar */
  --token-credit-bar:          rgba(17,24,39,0.18);
  --token-credit-fill:         #111827;

  /* Global accent alias for pages that reference --blue */
  --blue:                      #111827;

  /* ── PLATFORM UI TYPOGRAPHY ─────────────────────────────────────────
     Defined centrally so ONE definition can serve every Labbie product.
     Nothing applies it unless a product opts in, so adding it here changes
     no existing page's rendering — the Website Builder keeps the Geist rule
     below untouched.

     Apple devices resolve the first two entries to the native San Francisco
     system face. Windows lands on Segoe UI rather than falling to Arial.
     Android falls through to its own system sans. No Apple font file is
     bundled, hosted or converted anywhere in this repository. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
             "Helvetica Neue", Arial, sans-serif;
}

html {
  background: #ffffff !important;
  min-height: 100% !important;
}

body {
  background: transparent !important;
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

.brand-word {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.02em !important;
}

.brand-mark {
  width: 26px !important;
  height: 26px !important;
}

.page-title,
.section-title,
.section-head .section-title,
h1, h2, h3 {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

.page-title {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

.page-sub {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

.stat-label,
.sidebar-label {
  font-weight: 500 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.stat-value {
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.section-title {
  font-weight: 400 !important;
  font-size: 0.88rem !important;
}

.section-link {
  font-weight: 400 !important;
  font-size: 0.78rem !important;
}

.detail-key {
  font-weight: 400 !important;
}

.detail-val {
  font-weight: 400 !important;
}

.profile-info strong {
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

.auth-title {
  font-weight: 300 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.02em !important;
}

.plan-name {
  font-weight: 500 !important;
  font-size: 1rem !important;
}

.plan-price {
  font-weight: 300 !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.02em !important;
}

.plan-sub {
  font-weight: 400 !important;
}

.cb-card-name,
.tmpl-body strong {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

.cb-card-meta {
  font-weight: 400 !important;
  font-size: 0.75rem !important;
}

.eyebrow {
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
}

.nav-item {
  font-weight: 400 !important;
  font-size: 0.84rem !important;
}

.nav-item.active {
  font-weight: 500 !important;
}

.account-popover-item,
.account-popover-item strong {
  font-weight: 400 !important;
  font-size: 0.84rem !important;
}

.tb-user {
  font-weight: 400 !important;
  font-size: 0.84rem !important;
}

.topbar-name {
  font-weight: 400 !important;
}

.avatar {
  font-weight: 500 !important;
  font-size: 0.72rem !important;
}

/* 0b ── GLOBAL BUTTON DNA
   Smaller, cleaner, less visual noise.
------------------------------------------------------------ */
.btn-dark,
.cb-create-btn,
.cb-btn-open,
.dp-btn {
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  padding: 7px 16px !important;
  box-shadow: none !important;
  transition: opacity 150ms !important;
  transform: none !important;
}

.btn-dark:hover,
.cb-create-btn:hover,
.cb-btn-open:hover,
.dp-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.8 !important;
}

.btn-ghost {
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  padding: 7px 16px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.btn-ghost:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  padding: 10px 18px !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

/* Workspace toolbar buttons */
.tbr-btn {
  font-weight: 400 !important;
  font-size: 0.75rem !important;
}

.tbr-btn.primary {
  box-shadow: none !important;
}

.tbr-btn.primary:hover {
  box-shadow: none !important;
  opacity: 0.85 !important;
}

/* 0c ── GLOBAL SPACING & WEIGHT REDUCTION
   Reduce border visibility, shadow intensity, visual density.
   Increase whitespace, breathing room, calmness.
------------------------------------------------------------ */

/* 2 ── FLOATING NAV ------------------------------------------- */
.g-nav {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s ease !important;
}

/* 3 ── TOPBAR ------------------------------------------------- */
.g-topbar,
.topbar {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
  height: 50px !important;
}

/* 4 ── SIDEBAR ----------------------------------------------- */
.g-sidebar,
.sidebar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

/* 5 ── CARDS -------------------------------------------------- */
.g-card,
.section-card,
.stat-card,
.plan-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  transition: border-color 0.2s ease !important;
}

.g-card:hover,
.section-card:hover,
.cb-card:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.g-card .tmpl-thumb,
.g-card .cb-card-thumb {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 6 ── SURFACE (hero search, toolbars) ----------------------- */
.g-surface {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

/* 7 ── MODAL / AUTH CARD ------------------------------------- */
.g-panel,
.auth-card {
  background: #ffffff !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* 8 ── DROPDOWN --------------------------------------------- */
.g-dropdown,
.account-popover {
  background: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
}

.account-popover {
  min-width: 180px !important;
  padding: 4px !important;
}

.account-popover-item {
  padding: 6px 10px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
}

.account-popover-item:hover {
  background: rgba(0,0,0,0.04) !important;
}

/* 9 ── SECONDARY BUTTONS ------------------------------------ */
.g-btn {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease !important;
}

.g-btn:hover {
  background: rgba(0,0,0,0.03) !important;
  transform: none !important;
  box-shadow: none !important;
}

.g-btn:active {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* 10 ── PRIMARY (BLACK) BUTTONS ----------------------------- */
.g-btn-primary {
  background: #111827 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease !important;
}

.g-btn-primary:hover {
  background: #111827 !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.8 !important;
}

.g-btn-primary:active {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* 11 ── INPUT FIELDS ---------------------------------------- */
.g-input-field,
.field input,
.field select {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
  font-weight: 400 !important;
}

.g-input-field:focus-within,
.field input:focus {
  border-color: rgba(0,0,0,0.20) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04) !important;
  outline: none !important;
}

/* 12 ── OVERLAY --------------------------------------------- */
.g-overlay,
.dp-overlay {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* 13 ── FORCE HERO / ALL SECTIONS TO PURE WHITE ------------ */
/* Kill every radial/linear gradient vignette the bundler injects
   into the hero section and its pseudo-elements */
.hero,
section.hero,
#chat-now {
  background: transparent !important;
  background-image: none !important;
}

.hero::before,
section.hero::before,
#chat-now::before,
.hero::after,
section.hero::after,
#chat-now::after {
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Kill any section wrapper that has its own background */
section.block,
.block {
  background: transparent !important;
}

/* 15 ── REDUCED MOTION -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .g-nav, .g-topbar, .g-sidebar, .g-card, .g-surface,
  .g-panel, .g-dropdown, .g-btn, .g-btn-primary, .g-input-field {
    transition: none !important;
    transform: none !important;
  }
  .g-card:hover, .g-btn:hover, .g-btn-primary:hover {
    transform: none !important;
  }
}

/* 14b ── NAV ITEM OVERRIDES (lighter sidebar nav) ----------- */
.nav-item {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
}

.nav-item:hover {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-item.active {
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-item.logout {
  color: #6b7280 !important;
}

.nav-item.logout:hover {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #111827 !important;
}

/* 14c ── CARD REFINEMENTS ----------------------------------- */
.cb-card {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  border-radius: 14px !important;
  /* Phase 2A: calm, monotonic ease-out (no spring/overshoot) so the gentle
     hover lift settles rather than bounces. */
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease !important;
}

/* Phase 2A — gentle interactive lift on clickable project cards.
   Conservative first pass: max -2px, very soft shadow, no scale, no bounce. */
.cb-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 6px 16px rgba(17,24,39,0.06) !important;
}

.plan-card.current-plan {
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: none !important;
}

/* 14d ── USAGE STRIP ---------------------------------------- */
.usage-strip {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.credit-bar {
  background: rgba(0,0,0,0.06) !important;
}

/* 14e ── WORKSPACE REFINEMENTS ------------------------------ */
.panel-l,
.panel-r {
  border-color: rgba(0,0,0,0.06) !important;
}

#wseToolbar,
.wse-mobile-row {
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

.browser-bar {
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

.gen-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* 14f ── MODAL REFINEMENTS ---------------------------------- */
.dp-box {
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* 14g ── AUTH REFINEMENTS ----------------------------------- */
.btn-google {
  border: 1px solid rgba(0,0,0,0.10) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

.btn-google:hover {
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: none !important;
}

/* 14h ── TEMPLATE PAGE REFINEMENTS -------------------------- */
.tmpl-card {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  border-radius: 12px !important;
  /* Phase 2A: template cards had NO transition anywhere, so add the same calm
     ease-out here — without it the hover lift would snap instantly. */
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease !important;
}

/* Phase 2A — gentle interactive lift on clickable template cards.
   The templates page tried to do this itself but targeted ".template-card"
   while the real class is ".tmpl-card", so it never fired. Owned here now. */
.tmpl-card:hover {
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 6px 16px rgba(17,24,39,0.06) !important;
  transform: translateY(-2px) !important;
}

.at-search-input {
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  border-radius: 10px !important;
}

.at-search-input:focus {
  border-color: rgba(0,0,0,0.16) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04) !important;
}

.at-filter-btn {
  font-weight: 400 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

.at-filter-btn.active,
.at-filter-btn:hover {
  border-color: rgba(0,0,0,0.16) !important;
}

/* 14i ── STAT BADGE REFINEMENTS ----------------------------- */
.stat-badge,
.badge-blue,
.badge-green,
.badge-amber {
  font-weight: 400 !important;
  font-size: 0.72rem !important;
  background: rgba(0,0,0,0.04) !important;
}

/* 16 ── REDUCED MOTION (Phase 2A hover lifts) ----------------
   Must be the LAST rule so it wins source order over the !important
   lift rules above. Keeps cards perfectly still for users who ask. */
@media (prefers-reduced-motion: reduce) {
  .cb-card:hover,
  .tmpl-card:hover { transform: none !important; }
}