/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {

  --canvas-node-source-primary: #10B981;
  --canvas-node-source-secondary: #D1FAE5;
  --canvas-node-source-border: #059669;
  --canvas-node-source-text: #065F46;
  --canvas-node-source-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
  

  --canvas-node-sink-primary: #3B82F6;
  --canvas-node-sink-secondary: #DBEAFE;
  --canvas-node-sink-border: #1D4ED8;
  --canvas-node-sink-text: #1E3A8A;
  --canvas-node-sink-gradient: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  

  --canvas-node-transform-primary: #8B5CF6;
  --canvas-node-transform-secondary: #EDE9FE;
  --canvas-node-transform-border: #7C3AED;
  --canvas-node-transform-text: #5B21B6;
  --canvas-node-transform-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  

  --canvas-node-state-idle: #6B7280;
  --canvas-node-state-running: #F59E0B;
  --canvas-node-state-success: #10B981;
  --canvas-node-state-error: #EF4444;
  --canvas-node-state-warning: #F59E0B;
  

  --canvas-connection-default: #6B7280;
  --canvas-connection-hover: #374151;
  --canvas-connection-active: #1F2937;
  --canvas-connection-selected: #3B82F6;
  --canvas-connection-animated: #3B82F6;
  --canvas-connection-gradient: linear-gradient(90deg, #6B7280 0%, #374151 100%);
  

  --canvas-bg: #FAFAFA;
  --canvas-grid: #E5E7EB;
  --canvas-grid-secondary: #F3F4F6;
  --canvas-guide-line: #3B82F6;
  

  --canvas-minimap-bg: rgba(255, 255, 255, 0.95);
  --canvas-minimap-border: #E5E7EB;
  --canvas-minimap-viewport: rgba(59, 130, 246, 0.2);
  --canvas-minimap-viewport-border: #3B82F6;
  

  --canvas-shadow-node: 0 4px 12px rgba(0, 0, 0, 0.08);
  --canvas-shadow-node-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --canvas-shadow-node-active: 0 12px 32px rgba(0, 0, 0, 0.16);
  --canvas-shadow-node-selected: 0 0 0 2px rgba(59, 130, 246, 0.3);
  --canvas-shadow-minimap: 0 4px 16px rgba(0, 0, 0, 0.1);
  --canvas-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.1);
  

  --canvas-border-radius-node: 8px;
  --canvas-border-radius-minimap: 6px;
  --canvas-border-radius-tooltip: 4px;
  --canvas-border-radius-button: 4px;
  

  --canvas-spacing-xs: 4px;
  --canvas-spacing-sm: 8px;
  --canvas-spacing-md: 12px;
  --canvas-spacing-lg: 16px;
  --canvas-spacing-xl: 24px;
  --canvas-spacing-xxl: 32px;
  

  --canvas-font-size-node: 12px;
  --canvas-font-weight-node: 500;
  --canvas-line-height-node: 1.2;
  --canvas-font-size-tooltip: 11px;
  --canvas-font-weight-tooltip: 400;
  --canvas-line-height-tooltip: 1.4;
  --canvas-font-size-minimap: 10px;
  --canvas-font-weight-minimap: 500;
  --canvas-line-height-minimap: 1.2;
  

  --canvas-animation-fast: 150ms;
  --canvas-animation-normal: 250ms;
  --canvas-animation-slow: 350ms;
  --canvas-animation-slower: 500ms;
  --canvas-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --canvas-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --canvas-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  

  --canvas-node-width: 150px;
  --canvas-node-height: 36px;
  --canvas-node-min-width: 120px;
  --canvas-node-max-width: 200px;
  --canvas-minimap-width: 200px;
  --canvas-minimap-height: 120px;
  --canvas-connection-stroke-width: 2px;
  --canvas-connection-stroke-width-hover: 3px;
  --canvas-connection-arrow-size: 8px;
  

  --canvas-z-index-canvas: 1;
  --canvas-z-index-connections: 5;
  --canvas-z-index-nodes: 10;
  --canvas-z-index-minimap: 1000;
  --canvas-z-index-tooltip: 2000;
  --canvas-z-index-modal: 3000;
}


[data-theme="dark"] {

  --canvas-bg: #111827;
  --canvas-grid: #374151;
  --canvas-grid-secondary: #1F2937;
  --canvas-guide-line: #60A5FA;
  

  --canvas-minimap-bg: rgba(17, 24, 39, 0.95);
  --canvas-minimap-border: #374151;
  

  --canvas-node-source-secondary: rgba(16, 185, 129, 0.1);
  --canvas-node-sink-secondary: rgba(59, 130, 246, 0.1);
  --canvas-node-transform-secondary: rgba(139, 92, 246, 0.1);
  

  --canvas-connection-default: #9CA3AF;
  --canvas-connection-hover: #D1D5DB;
  --canvas-connection-active: #F3F4F6;
}


:root {
  --canvas-breakpoint-mobile: 768px;
  --canvas-breakpoint-tablet: 1024px;
  --canvas-breakpoint-desktop: 1440px;
  --canvas-breakpoint-wide: 1920px;
}


@media (max-width: 768px) {
  :root {
    --canvas-node-width: 120px;
    --canvas-node-height: 32px;
    --canvas-minimap-width: 150px;
    --canvas-minimap-height: 90px;
    --canvas-font-size-node: 11px;
    --canvas-spacing-md: 8px;
    --canvas-spacing-lg: 12px;
  }
}


@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --canvas-node-width: 140px;
    --canvas-node-height: 34px;
    --canvas-minimap-width: 180px;
    --canvas-minimap-height: 108px;
  }
}


@media (min-width: 1920px) {
  :root {
    --canvas-node-width: 160px;
    --canvas-node-height: 40px;
    --canvas-minimap-width: 220px;
    --canvas-minimap-height: 132px;
    --canvas-font-size-node: 13px;
  }
}