/* ============================================================
   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;
}

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;
}

.cb-card:hover {
  transform: none !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !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;
}

.tmpl-card:hover {
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  transform: none !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;
}