CSS global.css

/* =============================================
   Lego Ladder — Global Variables & Resets
   Studio 5000 Professional Theme
   ============================================= */

:root {
  /* ─── Industrial Color Palette ─── */
  --bg-primary: #e8ecef;
  --bg-secondary: #d1d8dc;
  --bg-tertiary: #b8c0c6;
  --bg-panel: #ffffff;
  --bg-canvas: #f0f2f4;

  --rail-color: #1a2634;
  --rail-active: #1a8a3c;

  --accent: #2471a3;
  --accent-hover: #1f618d;
  --accent-active: #1a5276;

  --text-primary: #1a2634;
  --text-secondary: #4a5a6a;
  --text-muted: #7f8f9e;

  --success: #1a8a3c;
  --success-light: #2ecc71;
  --success-glow: rgba(26, 138, 60, 0.45);
  --success-glow-strong: rgba(26, 138, 60, 0.85);
  --warning: #d68910;
  --danger: #c0392b;

  --border-color: #c8d0d8;
  --border-strong: #a8b4be;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.22);

  /* ─── Ladder-specific ─── */
  --wire-inactive: #6a7b8c;
  --wire-active: #1a8a3c;
  --rung-bg: rgba(255,255,255,0.55);
  --rung-bg-alt: rgba(232,236,239,0.6);
  --rung-number-bg: #1a2634;
  --rung-number-color: #e8ecef;

  /* ─── Dimensions ─── */
  --rung-height: 100px;
  --rail-width: 30px;
  --element-width: 64px;
  --element-height: 44px;
  --header-height: 48px;
  --footer-height: 28px;
}

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

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Selection ─── */
::selection {
  background: var(--accent);
  color: #ffffff;
}

/* ─── Scrollbar Styling ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ─── Power Flow Animations ─── */
@keyframes pulse-green {
  0%, 100% {
    filter: drop-shadow(0 0 3px var(--success-glow));
  }
  50% {
    filter: drop-shadow(0 0 10px var(--success-glow-strong));
  }
}

@keyframes wire-flow {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes rail-flow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20;
  }
}

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