/* ============================================================
   Audio FX Simulator - Design System & Styles
   ============================================================ */

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

/* ---- Import Modules ---- */
@import url('./header.css');
@import url('./source-panel.css');
@import url('./visualizer.css');
@import url('./effects-panel.css');
@import url('./chain.css');
@import url('./components.css');

/* ---- Design Tokens ---- */
:root {
  /* Backgrounds */
  --bg-base: #07070d;
  --bg-primary: #0c0c16;
  --bg-secondary: #111120;
  --bg-elevated: #18182e;
  --bg-panel: rgba(12, 12, 24, 0.9);
  --bg-card: rgba(22, 22, 44, 0.55);
  --bg-card-hover: rgba(32, 32, 56, 0.72);
  --bg-input: rgba(8, 8, 18, 0.75);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(0, 212, 255, 0.38);

  /* Text */
  --text-primary: #e8e8f4;
  --text-secondary: #9898b8;
  --text-muted: #5c5c7a;
  --text-accent: #00d4ff;

  /* Accents */
  --cyan: #00d4ff;
  --cyan-dim: #0099bb;
  --purple: #7c3aed;
  --purple-dim: #5b21b6;
  --pink: #f43f6e;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--cyan), var(--purple));
  --gradient-accent-h: linear-gradient(90deg, var(--cyan), var(--purple));
  --gradient-panel: linear-gradient(180deg, rgba(18, 18, 36, 0.92), rgba(10, 10, 22, 0.96));

  /* Shadows & Glows */
  --glow-cyan: 0 0 14px rgba(0, 212, 255, 0.25), 0 0 42px rgba(0, 212, 255, 0.08);
  --glow-purple: 0 0 14px rgba(124, 58, 237, 0.25), 0 0 42px rgba(124, 58, 237, 0.08);
  --glow-sm: 0 0 8px rgba(0, 212, 255, 0.22);
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.42);
  --shadow-panel: 0 8px 30px rgba(0, 0, 0, 0.5);

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms var(--ease-out);
  --t-normal: 250ms var(--ease-out);
  --t-slow: 400ms var(--ease-out);

  /* Layout */
  --header-h: 56px;
  --chain-h: 110px;
  --panel-w: 260px;
  --panel-w-right: 310px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 13.5px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, var(--bg-primary), var(--bg-base));
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }
button { font-family: inherit; }
.hidden { display: none !important; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ===========================================================
   START OVERLAY
   =========================================================== */
#start-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(7, 7, 13, 0.96);
  backdrop-filter: blur(40px);
  gap: var(--sp-4);
}
.overlay-icon { font-size: 3.5rem; margin-bottom: var(--sp-2); filter: drop-shadow(0 0 20px rgba(0,212,255,0.3)); }
.overlay-title {
  font-size: 2.4rem; font-weight: 700;
  background: var(--gradient-accent); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.overlay-subtitle { color: var(--text-secondary); font-size: 1rem; margin-bottom: var(--sp-4); }
#start-btn {
  padding: 14px 44px; font-size: 1.05rem; font-weight: 600;
  color: var(--bg-base); background: var(--gradient-accent);
  border: none; border-radius: var(--r-full); cursor: pointer;
  transition: var(--t-normal); box-shadow: var(--glow-cyan);
  animation: pulse-glow 2.2s ease-in-out infinite;
}
#start-btn:hover { transform: scale(1.06); box-shadow: 0 0 28px rgba(0,212,255,0.45), 0 0 64px rgba(0,212,255,0.15); }
@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow-cyan); }
  50% { box-shadow: 0 0 26px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.14); }
}

/* ===========================================================
   APP LAYOUT
   =========================================================== */
#app {
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--chain-h);
  height: 100vh; width: 100vw;
}

#app-main {
  display: grid;
  grid-template-columns: var(--panel-w) 1fr var(--panel-w-right);
  overflow: hidden;
}

/* ===========================================================
   ANIMATIONS
   =========================================================== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,0.15); }
  50% { box-shadow: 0 0 16px rgba(0,212,255,0.3); }
}
.animate-in { animation: fade-in 0.3s var(--ease-out) both; }