/* =====================================================
   AI FACTORY BUILDER — main.css
   Industrial dark theme. Monospace precision.
   ===================================================== */

:root {
  /* ── Canvas / chrome surfaces ── */
  --bg-void:          #090b0e;   /* infinite canvas background */
  --bg-base:          #0d1016;
  --bg-panel:         #131720;
  --bg-elevated:      #18202e;
  --bg-hover:         #1c2535;
  --bg-active:        #21293d;

  /* ── Block surfaces ── clearly distinct from void, not as bright as selection */
  --bg-block:         #202d44;
  --bg-block-header:  #273653;

  /* ── Borders ── */
  --border-dim:         #1c2436;
  --border-base:        #273248;
  --border-bright:      #364660;
  --border-accent:      #4a7aff;
  /* Block-specific border — clearly separates block from canvas */
  --border-block:       #354e7a;
  --border-block-hover: #4a6898;

  /* ── Text ── */
  --text-dim:      #354260;
  --text-muted:    #546080;
  --text-base:     #8090b0;
  --text-bright:   #c0ccE0;
  --text-white:    #e4eeff;

  /* ── Accent colours ── */
  --accent-blue:   #4a7aff;
  --accent-cyan:   #00d4ff;
  --accent-green:  #00ff9d;
  --accent-orange: #ff8c00;
  --accent-red:    #ff3d5a;
  --accent-purple: #9d4aff;
  --accent-yellow: #ffd600;

  /* ── Port type colours ── */
  --port-any:      #8090b0;
  --port-text:     #4a7aff;
  --port-number:   #00ff9d;
  --port-bool:     #ff8c00;
  --port-json:     #ffd600;
  --port-image:    #9d4aff;
  --port-trigger:  #ff3d5a;

  /* ── Layout ── */
  --sidebar-width:    260px;
  --sidebar-tab-w:    54px;
  --controls-height:  56px;
  --minimap-size:     200px;
  --grid-size:        24px;

  /* ── Typography ── */
  --font-mono:  'Share Tech Mono', 'Courier New', monospace;
  --font-ui:    'Rajdhani', 'Segoe UI', sans-serif;
  --font-code:  'Space Mono', 'Courier New', monospace;

  /* ── Animation ── */
  --anim-fast:  80ms;
  --anim-base:  160ms;
  --anim-slow:  320ms;

  /* ── Z-index layers ── */
  --z-workspace:   1;
  --z-pipeline:    2;
  --z-block:       10;
  --z-port:        15;
  --z-controls:    300;
  --z-sidebar:     400;
  --z-minimap:     500;
  --z-window:      600;   /* floating windows — above minimap & controls */
  --z-window-top:  700;   /* focused floating window */
  --z-tooltip:     800;
  --z-dragging:    900;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#app {
  display: flex;
  width: 100vw; height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-base); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* Utility */
.hidden    { display: none !important; }
.invisible { visibility: hidden; }

button {
  font-family: var(--font-ui);
  cursor: pointer; border: none; outline: none;
  background: none; color: inherit;
}

/* Subtle noise texture */
#app::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}