/* ================================================================
   DRACULA THEME - CSS CUSTOM PROPERTIES
   ================================================================
   Dracula Color Palette:
   - Background:    #282a36
   - Current Line:  #44475a
   - Selection:     #44475a
   - Foreground:    #f8f8f2
   - Comment:       #6272a4
   - Cyan:          #8be9fd
   - Green:         #50fa7b
   - Orange:        #ffb86c
   - Pink:          #ff79c6
   - Purple:        #bd93f9
   - Red:           #ff5555
   - Yellow:        #f1fa8c
   ================================================================ */

:root {
  /* Dracula Base Colors */
  --bg-0: #282a36;
  --bg-1: #1e1f29;
  --bg-2: #24252e;
  --bg-3: #44475a;
  --bg-4: #3e3f4a;
  --bg-hover: #343746;
  --bg-current-line: #44475a;

  /* Borders */
  --border: #44475a;
  --border-light: #6272a4;
  --border-focus: #bd93f9;

  /* Text Colors */
  --text-1: #f8f8f2;
  --text-2: #e6e6dc;
  --text-3: #6272a4;
  --text-muted: #6272a4;

  /* Accent Colors */
  --accent: #bd93f9;
  --accent-hover: #ff79c6;
  --accent-secondary: #8be9fd;

  /* Semantic Colors */
  --danger: #ff5555;
  --danger-hover: #ff6e6e;
  --success: #50fa7b;
  --success-hover: #69ff94;
  --warning: #ffb86c;
  --warning-hover: #ffcfa3;

  /* Block Type Colors */
  --clr-dialogue: #8be9fd;
  --clr-action: #50fa7b;
  --clr-flow: #ff79c6;
  --clr-audio: #ffb86c;
  --clr-utility: #6272a4;

  /* UI Elements */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --transition: 0.18s ease;
  --transition-fast: 0.12s ease;

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', Consolas, monospace;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);

  /* Scrollbar */
  --scrollbar-thumb: #6272a4;
  --scrollbar-track: transparent;
}

/* Dracula-specific enhancements */
::selection {
  background: #44475a;
  color: #f8f8f2;
}

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #7280b4;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}