/**
 * Node Panel System - CSS Custom Properties
 *
 * Design tokens specific to the node-based panel system.
 * These extend the global tokens in tokens.css.
 */

:root {
  /* =========================================================================
   * PANEL DIMENSIONS
   * ========================================================================= */
  --node-panel-min-width: 280px;
  --node-panel-max-width: 500px;
  --node-panel-default-width: 320px;
  --node-panel-header-height: 44px;

  /* =========================================================================
   * PANEL COLORS
   * ========================================================================= */
  --node-panel-bg: rgba(26, 26, 46, 0.98);
  --node-panel-header-bg: rgba(0, 0, 0, 0.25);
  --node-panel-border: rgba(255, 255, 255, 0.1);
  --node-panel-border-focus: rgba(0, 217, 255, 0.4);

  /* =========================================================================
   * PANEL SHADOWS
   * ========================================================================= */
  --node-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --node-panel-shadow-dragging: 0 16px 48px rgba(0, 0, 0, 0.5);
  --node-panel-shadow-focus: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 217, 255, 0.3);

  /* =========================================================================
   * PANEL TYPE ACCENT COLORS
   * Left border accent for each panel type
   * ========================================================================= */
  --node-identity-accent: #1E88E5;
  --node-characters-accent: #E53935;
  --node-story-accent: #43A047;
  --node-technical-accent: #8E24AA;
  --node-planning-accent: #FB8C00;
  --node-analysis-accent: #00ACC1;

  /* =========================================================================
   * TASKBAR
   * ========================================================================= */
  --taskbar-height: 44px;
  --taskbar-bg: rgba(20, 20, 25, 0.95);
  --taskbar-border: rgba(255, 255, 255, 0.08);
  --taskbar-item-bg: rgba(255, 255, 255, 0.05);
  --taskbar-item-bg-hover: rgba(0, 217, 255, 0.1);
  --taskbar-item-border: rgba(255, 255, 255, 0.1);
  --taskbar-item-border-hover: rgba(0, 217, 255, 0.3);

  /* =========================================================================
   * HEADER BUTTONS
   * ========================================================================= */
  --node-btn-size: 28px;
  --node-btn-bg: rgba(255, 255, 255, 0.05);
  --node-btn-bg-hover: rgba(255, 255, 255, 0.1);
  --node-btn-border: rgba(255, 255, 255, 0.1);
  --node-btn-color: rgba(255, 255, 255, 0.6);
  --node-btn-color-hover: rgba(255, 255, 255, 0.9);

  /* Minimize button hover */
  --node-btn-minimize-bg-hover: rgba(0, 217, 255, 0.15);
  --node-btn-minimize-border-hover: rgba(0, 217, 255, 0.3);
  --node-btn-minimize-color-hover: var(--color-cyan, #00D9FF);

  /* Close button hover */
  --node-btn-close-bg-hover: rgba(239, 68, 68, 0.15);
  --node-btn-close-border-hover: rgba(239, 68, 68, 0.3);
  --node-btn-close-color-hover: rgb(239, 68, 68);

  /* Collapse button hover */
  --node-btn-collapse-bg-hover: rgba(255, 193, 7, 0.15);
  --node-btn-collapse-border-hover: rgba(255, 193, 7, 0.3);
  --node-btn-collapse-color-hover: rgb(255, 193, 7);
}