/* ==========================================================================
   HYDROBLOX — DESIGN SYSTEM (body.css)
   
   All variable names must match what items.css, sidebar.css, canvas.css,
   connections.css, results.css, and running.css already use.
   Palette: White canvas, white cards, gray scale, single blue accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Font ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Layout ── */
  --navbar-height:  50px;
  --sidebar-width:  260px;

  /* ── Radii ── */
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ── Motion ── */
  --ease-fast:   0.12s cubic-bezier(0.4,0,0.2,1);
  --ease-normal: 0.2s  cubic-bezier(0.4,0,0.2,1);
  --ease-slow:   0.35s cubic-bezier(0.4,0,0.2,1);

  /* ── SURFACES (light theme) ── */
  --bg-base:    #f0f1f3;   /* canvas work area — cool light gray */
  --bg-overlay: #ffffff;   /* node cards, modals — white */
  --bg-raised:  #ffffff;   /* sidebar, panels — white */
  --bg-hover:   #f4f5f6;   /* hover state — pure neutral grey, NO color tint */
  --bg-active:  #e9eaeb;   /* active/pressed state — pure neutral grey */
  --canvas-bg:  #f0f1f3;

  /* ── Borders ── */
  --border:        #e5e7eb;
  --border-color:   #e5e7eb;
  --border-focus:   var(--primary);
  --border-accent:  #475569;  /* matching slate family */

  /* ── Text ── */
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-disabled:  #d1d5db;
  --text-inv:       #f9fafb;

  /* ── Single accent: Slate Charcoal ──
     Dark, sophisticated, premium — not black, not blue, not purple.
     Think a polished graphite, like a luxury dashboard. */
  --primary:            #334155;   /* slate-700: the hero tone */
  --primary-dark:       #1e293b;   /* slate-800: pressed / deeper hover */
  --primary-light:      #f1f5f9;   /* slate-50:  tinted backgrounds */
  --primary-glow:       rgba(51, 65, 85, 0.10);   /* subtle shadow tint */
  --primary-glow-strong:rgba(51, 65, 85, 0.20);
  --accent:             #334155;

  /* ── Semantic ── */
  --success:      #16a34a;
  --success-glow: rgba(22, 163, 74, 0.18);
  --danger:       #dc2626;
  --danger-glow:  rgba(220, 38, 38, 0.18);
  --warning:      #d97706;
  --warning-glow: rgba(217, 119, 6, 0.18);
  --info:         #0891b2;

  /* ── Node type accent colors (used by items.css & sidebar.css) ── */
  --node-data:          var(--primary);    /* sky blue  */
  --node-analysis:      #0d9488;           /* teal (replaced purple) */
  --node-visualization: #059669;           /* green */
  --node-condition:     #d97706;   /* amber */
  --node-loop:          #ea580c;   /* orange */
  --node-code:          #0891b2;   /* cyan */
  --node-wasm:          #db2777;   /* pink */
  --node-trigger:       #d97706;   /* amber */
  --node-helper:        #6b7280;   /* gray */
  --node-session:       #059669;   /* green */

  /* ── Shadows ── */
  --shadow-node:   0 1px 3px rgba(0,0,0,0.10), 0 1px 8px rgba(0,0,0,0.06);
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:     0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.12);
  --shadow-modal:  0 20px 40px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.08);

  /* Legacy compat (globals.css globals) */
  --primary-color:  var(--primary);
  --success-color:  var(--success);
  --danger-color:   var(--danger);
  --warning-color:  var(--warning);
  --font-family:    var(--font);
  --border-radius:  var(--radius-md);
  --hover-bg:       var(--bg-hover);
  --light-bg:       #f9fafb;
  --muted-text:     var(--text-secondary);
  --dark-text:      var(--text-primary);
  --shadow-light:   var(--shadow-sm);
  --shadow-medium:  var(--shadow-md);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { cursor: pointer; font-family: var(--font); border: none; background: transparent; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Keyframes ── */
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--primary-glow); }
  50%       { box-shadow: 0 0 0 5px var(--primary-glow-strong); }
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }