/* Scratch-like theme overrides for Visual Web Builder
   This file is intentionally separate so it can be removed if needed.
*/

:root{
  --vwb-primary: #FFAB19;
  --vwb-primary-dark: #E09100;
  --vwb-bg-surface: #F5F7FA;
  --vwb-text: #000000;
  --title-color: #ffffff;
  --vwb-muted: #6B7280;
  --vwb-card-radius: 12px;
  --vwb-shadow-sm: 0 6px 18px rgba(34,34,34,0.06);
  --vwb-shadow-md: 0 12px 30px rgba(34,34,34,0.08);
  --vwb-panel-padding: 12px;
  --vwb-header-bg: #ffffff;
  --vwb-card-bg: #ffffff;
}

/* Dark mode overrides (when html has .dark) */
html.dark {
  --vwb-bg-surface: #222428; /* page surface */
  --vwb-text: #ffffff;
  --title-color: #000000;
  --vwb-muted: #9CA3AF;
  --vwb-card-bg: #2b2f33;
  --vwb-header-bg: #1f2225;
  --vwb-shadow-sm: 0 6px 18px rgba(0,0,0,0.6);
  --vwb-shadow-md: 0 12px 30px rgba(0,0,0,0.7);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--vwb-primary), var(--vwb-primary-dark));
  color: #111 !important; /* use dark text on bright primary to satisfy contrast */
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: var(--vwb-shadow-sm);
  border: none !important;
  font-weight: 700;
}
.btn-primary:hover{ transform: translateY(-1px); }

.header {
  background: var(--vwb-header-bg) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  height: 64px !important;
  padding: 0 20px !important;
  display:flex; align-items:center; gap:16px;
  color: var(--vwb-text);
}
.header-logo img{ height:44px; }
.app-name{ font-family: 'Archivo', sans-serif; font-size:20px; color:var(--title-color); font-weight:700; margin-left:6px }
.header-nav{ display:flex; gap:8px; margin-left:16px }
.header-nav .nav-btn{ padding:8px 12px; border-radius:8px; background:transparent; border:1px solid transparent; font-weight:700; color:var(--vwb-muted); }
.header-nav .nav-btn:hover{ background: #fff; color:var(--vwb-text); box-shadow: var(--vwb-shadow-sm); }

.header-actions{ margin-left:auto; display:flex; gap:10px; align-items:center }

/* Homepage cards */
.hero { padding:48px 0; background: linear-gradient(180deg,#fff,#fff); }
.hero .hero-inner{ max-width:1100px; margin:0 auto; display:flex; gap:32px; align-items:center }
.hero h1{ font-family:'Archivo',sans-serif; font-size:36px; color:var(--vwb-text); margin-bottom:8px }
.project-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.project-card{ background:var(--vwb-card-bg); border-radius:var(--vwb-card-radius); overflow:hidden; box-shadow:var(--vwb-shadow-sm); transition:transform .12s ease, box-shadow .12s ease }
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--vwb-shadow-md) }
.project-thumb{ width:100%; height:140px; object-fit:cover; background:#eee }
.project-meta{ padding:12px; display:flex; justify-content:space-between; align-items:center }

/* Web builder specific */
.builder-interface { grid-template-columns: 320px 1fr 320px !important; gap:20px; }
.toolbox{ background:var(--vwb-bg-surface); border-radius:12px; padding:var(--vwb-panel-padding); box-shadow:var(--vwb-shadow-sm); color:var(--vwb-text) }
.tab-nav{ display:flex; gap:6px; padding:6px 0; }
.tab-btn{ background:transparent; border-radius:8px; padding:8px 10px; font-weight:700; color:var(--vwb-muted); transition: all 0.2s; }
.tab-btn.active{ background:var(--vwb-card-bg); box-shadow:var(--vwb-shadow-sm); color:var(--vwb-text); }
.tab-btn:hover{ background:var(--vwb-card-bg); color:var(--vwb-text); }

.draggable{ border-radius:10px; padding:8px 10px; margin-bottom:8px; display:flex; align-items:center; gap:8px; cursor:grab; box-shadow: 0 6px 14px rgba(0,0,0,0.04); }
.draggable.motion{ background:#2f74d6; color:#fff } /* darker blue for better contrast */
.draggable.looks{ background:#6f4bd6; color:#fff } /* darker purple */
.draggable.control{ background:#FFBF00; color:#222 }

/* Ensure primary button contrast on both light/dark.
   If white text on --vwb-primary fails contrast, consider using dark text on lighter primary.
*/
.btn-primary{ color: #fff !important; }
html.dark .btn-primary{
  /* add subtle stronger shadow so button stands out on dark surfaces */
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.canvas{ border-radius:12px; background: var(--vwb-card-bg); padding:20px; box-shadow: var(--vwb-shadow-sm); min-height:420px; color: var(--vwb-text); }
.block{ border-radius:10px; overflow:hidden; }
.block-header{ padding:8px 10px; background:linear-gradient(180deg,#fafafa,#f0f0f0); }
.delete-btn{ border-radius:8px; }

/* Header action buttons */
.header-actions .btn { padding:8px 12px; border-radius:10px; font-weight:700; }
.header-actions .btn--ghost{ background: transparent; border:1px solid rgba(0,0,0,0.06); }
.header-actions .avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; display:inline-block }

/* Toolbox controls */
.toolbox .search { width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); margin-bottom:8px }
.toolbox .category-title{ margin:8px 0; font-weight:800; color:var(--vwb-muted); font-size:13px }

/* Canvas controls (top right actions) */
.canvas-controls{ position:absolute; top:12px; right:12px; display:flex; gap:8px }
.canvas-controls .btn{ padding:6px 10px; border-radius:8px }

/* Inspector / right panel */
.inspector{ background:var(--vwb-card-bg); border-radius:12px; padding:12px; box-shadow:var(--vwb-shadow-sm); }

/* Small tweaks for readability */
body{ background: var(--vwb-card-bg); color:var(--vwb-text); transition: background 0.3s, color 0.3s; }

/* Theme-aware blocks and elements */
.block{ background: var(--vwb-card-bg); color: var(--vwb-text); }
.block-header{ background: var(--vwb-bg-surface); color: var(--vwb-text); }
.tab-content{ background: transparent; color: var(--vwb-text); }

/* Tab navigation in dark mode */
html.dark .tab-nav{ background-color: var(--vwb-bg-surface); }


/* Accessibility focus */
:focus{ outline:3px solid rgba(0,123,255,0.16); outline-offset:2px }

/* Small screens adjustments */
@media (max-width: 900px){
  .builder-interface{ grid-template-columns: 1fr !important; }
  .toolbox, .builder-interface > :nth-child(3){ display:none }
}