/**
 * CSS变量系统 - 统一设计令牌
 * ===========================================
 * 定义整个应用的设计系统变量，包括颜色、字体、间距等
 * 替代分散在各个CSS文件中的重复变量定义
 */

:root {
    /* ===========================================
       颜色系统 - Color System
       =========================================== */
    
    /* 主色调 - Primary Colors */
    --color-primary: #ff6b35;              /* 橙红色 - 主要强调色 */
    --color-primary-light: #ff8a5c;        /* 浅橙红色 */
    --color-primary-dark: #e55a2b;         /* 深橙红色 */
    
    --color-secondary: #00ff41;            /* 绿色 - 成功/确认色 */
    --color-secondary-light: #33ff66;      /* 浅绿色 */
    --color-secondary-dark: #00e03a;       /* 深绿色 */
    
    --color-accent: #ffaa00;               /* 黄橙色 - 警告/提示色 */
    --color-accent-light: #ffbb33;         /* 浅黄橙色 */
    --color-accent-dark: #e69900;          /* 深黄橙色 */
    
    /* 中性色 - Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;
    
    /* 背景色 - Background Colors */
    --color-bg-primary: #262728;          /* 主背景 - 更中性的深灰 */
    --color-bg-secondary: #0f0f0f;        /* 次背景 - 更深灰 */
    --color-bg-tertiary: #2a2a2a;         /* 三级背景 - 浅灰 */
    --color-bg-dark: #0a0a0a;             /* 最深背景 */
    --color-bg-light: #333333;            /* 浅色背景 */
    --color-bg-overlay: rgba(0, 0, 0, 0.8); /* 遮罩背景 */
    --canvas-bg-color: var(--color-bg-primary);            /* 画布背景与主背景一致 */
    
    /* 文字颜色 - Text Colors */
    --color-text-primary: #525151;        /* 主要文字 - 浅灰 */
    --color-text-secondary: #cccccc;      /* 次要文字 - 中灰 */
    --color-text-muted: #666666;          /* 静音文字 - 深灰 */
    --color-text-disabled: #444444;       /* 禁用文字 */
    --color-text-inverse: #ffffff;        /* 反转文字 - 白色 */
    
    /* 边框颜色 - Border Colors */
    --color-border-light: #333333;        /* 浅色边框 */
    --color-border-medium: #555555;       /* 中等边框 */
    --color-border-dark: #666666;         /* 深色边框 */
    --color-border-focus: var(--color-primary); /* 焦点边框 */
    --color-border-executed: #808080;     /* 已执行过程边框颜色 - 灰色 */
    
    /* 状态颜色 - State Colors */
    --color-success: var(--color-secondary);    /* 成功状态 */
    --color-warning: var(--color-accent);       /* 警告状态 */
    --color-error: #ff4444;                     /* 错误状态 */
    --color-info: #4488ff;                      /* 信息状态 */
    
    /* ===========================================
       字体系统 - Typography System
       =========================================== */
    
    /* 字体族 - Font Families */
    --app-font-family: 'Courier New', '微软雅黑 Light', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Menlo', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Cascadia Code', 'Fira Code', monospace;
    --font-mono: 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Menlo', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Cascadia Code', 'Fira Code', monospace;

    /* 字体大小 - Font Sizes */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-md: 1rem;      /* 16px (alias for base) */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    --font-size-5xl: 3rem;     /* 48px */
    --font-size-6xl: 3.75rem;  /* 60px */

    /* Heading Font Sizes */
    --font-size-h1: var(--font-size-5xl);
    --font-size-h2: var(--font-size-4xl);
    --font-size-h3: var(--font-size-3xl);
    --font-size-h4: var(--font-size-2xl);
    --font-size-h5: var(--font-size-xl);
    --font-size-h6: var(--font-size-lg);

    /* 字体粗细 - Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* 行高 - Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    --line-height-base: var(--line-height-normal);
    --line-height-heading: var(--line-height-tight);

    /* Link Color */
    --color-link: var(--color-primary);
    --opm-transition-fast: 0.1s ease;
    --opm-transition-normal: 0.3s ease;
    --opm-border-width: var(--border-width-medium);
    --opm-selected-width: var(--selection-width);
    --opm-selected-offset: var(--selection-offset);
    --opm-object-spacing: var(--space-1);
    --opm-object-gap: var(--space-1);
    --opm-link-hover-width: 3px;
    --opm-link-hover-offset: 2px;
    --opm-link-selected-width: 3px;
    --opm-link-label-color: #f8fafc;
    --opm-link-label-stroke: rgba(15, 23, 42, 0.85);
    
    /* 仿真控制按钮颜色 */
    --simulation-run-color: #00ff41;
    --simulation-stop-color: #ff6b35;
    --simulation-reset-color: #888888;
    
    /* 语义化间距 */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --spacing-2xl: var(--space-12);
    --spacing-3xl: var(--space-16);
    
    /* ===========================================
       尺寸系统 - Size System
       =========================================== */
    
    /* 组件尺寸 */
    --nav-height: 65px;
    --toolbar-height: 50px;
    --sidebar-width: 320px;
    --button-height: 40px;
    --input-height: 40px;
    
    /* ===========================================
       边框和圆角 - Border & Radius
       =========================================== */
    
    /* 边框宽度 */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    
    /* 圆角半径 */
    --radius-none: 0;
    --radius-sm: 0.125rem;    /* 2px */
    --radius-base: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-full: 50%;
    
    /* 默认圆角 */
    --border-radius: var(--radius-base);
    
    /* ===========================================
       阴影系统 - Shadow System
       =========================================== */
    
    /* 复古像素风格阴影 */
    --shadow-retro: 5px 5px 0px var(--color-black);
    --shadow-retro-sm: 3px 3px 0px var(--color-black);
    --shadow-retro-lg: 8px 8px 0px var(--color-black);
    
    /* 现代阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* 默认阴影 */
    --box-shadow: none;
    
    /* 缩放比提示 - 暗色主题默认 */
    --zoom-feedback-bg: rgba(26, 26, 26, 0.9);
    --zoom-feedback-text: #00ff41;
    --zoom-feedback-border: #00ff41;
    
    /* ===========================================
       动画和过渡 - Animation & Transition
       =========================================== */
    
    /* 持续时间 */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    
    /* 缓动函数 */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 预设过渡 */
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
    --transition-all: all var(--duration-normal) var(--ease-out);
    
    /* ===========================================
       Z-Index层级 - Z-Index Layers
       =========================================== */
    
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    
    /* ===========================================
       OPM特定变量 - OPM Specific Variables
       =========================================== */
    
    /* OPM元素颜色 - 暗色主题默认 */
    --opm-object-color: var(--color-primary);
    --opm-process-color: var(--color-secondary);
    --opm-object-state-color: var(--color-accent);
    --opm-view-color: var(--color-text-secondary);
    --opm-view-title-color: var(--color-text-secondary);
    --opm-view-title-bg: var(--color-bg-primary);
    /* Card mode (small view) defaults */
    /* Card mode background: match canvas background */
    --opm-view-card-bg: var(--color-bg-primary);
    --opm-view-card-text: #ffffff;
    --opm-view-card-text-shadow: rgba(0, 0, 0, 0.7);
    --opm-element-bg: var(--color-bg-primary);
    --opm-element-bg-hover: var(--color-bg-tertiary);
    /* Card mode border color (light gray) */
    --opm-view-card-border: #c0c0c0;
    --opm-selected-color: var(--selection-color);
    --opm-link-hover-color: var(--link-hover-color);
    --opm-link-selected-color: var(--selection-color);
    --opm-activated-object-bg: #ffd9b3;
    --opm-activated-process-bg: #cff5dd;
    --opm-activated-state-bg: transparent;
    --opm-activated-text-color: var(--color-text-inverse);
    
    /* OPM元素尺寸 */
    --opm-element-min-width: 80px;
    --opm-element-min-height: 40px;
    --opm-element-max-width: 240px;
    --opm-element-padding: var(--space-2);
    
    /* 连线样式 */
    --link-width: 2px;
    
    /* 选中状态 */
    --selection-color: var(--color-primary);
    --selection-width: 2px;
    --selection-offset: 2px;
    --selection-bg-color: rgba(0, 255, 65, 0.08);
    --selection-shadow: 0 0 8px 2px rgba(0, 255, 65, 0.15);

    /* View Tree Specific */
    --view-tree-selected-bg: var(--color-bg-primary);
    --view-tree-selected-text: var(--color-text-inverse);

    /* 基本字体大小 */
    --base-font-size: 15px; /* Slightly smaller for light theme */
}

/* ===========================================
   亮色主题变量 - Light Theme Variables
   =========================================== */

[data-theme="light"] {
    /* 背景色 - Background Colors */
    --color-bg-primary: #fbfbfc;          /* 主背景 - 超浅中性灰，保持冷暖平衡 */
    --color-bg-secondary: #e9ecef;        /* 次背景 - 深一些的灰 */
    --color-bg-tertiary: #d6dadd;         /* 三级背景 - 更深灰 */
    --color-bg-dark: #a7a6a6;             /* 深色背景 */
    --color-bg-light: #f8f9fa;            /* 浅色背景 */
    --color-bg-overlay: rgba(176, 177, 178, 0.95); /* 遮罩背景 */
    --canvas-bg-color: var(--color-bg-primary);            /* 画布背景与主背景一致 */
    
    /* 文字颜色 - Text Colors */
    --color-text-primary: #212529;        /* 主要文字 - 深灰 */
    --color-text-secondary: #6c757d;      /* 次要文字 - 中灰 */
    --color-text-muted: #868e96;          /* 静音文字 - 浅灰 */
    --color-text-disabled: #adb5bd;       /* 禁用文字 */
    --color-text-inverse: #ffffff;        /* 反转文字 - 白色 */
    
    /* 边框颜色 - Border Colors */
    --color-border-light: #dee2e6;        /* 浅色边框 */
    --color-border-medium: #adb5bd;       /* 中等边框 */
    --color-border-dark: #6c757d;         /* 深色边框 */
    --color-border-executed: #9e9e9e;     /* 已执行过程边框颜色 - 浅灰色 */
    
    /* 主色调 - 降低饱和度以适配亮色背景 */
    --color-primary: #ff875e;
    --color-primary-light: #ffb492;
    --color-primary-dark: #e26d44;
    
    /* 亮色主题下的特殊颜色调整 */
    --color-secondary: #00b030;           /* 更深的绿色 - 在浅色背景下更清晰 */
    --color-secondary-dark: #008025;      /* 深绿色 */
    
    /* OPM元素颜色调整 - 亮色模式专用色彩方案 */
    --opm-object-color: #fb7531;          /* 对象颜色 - 深蓝色 (与暗色模式红色形成对比) */
    --opm-process-color: #27e3b7;         /* 过程颜色 - 深紫色 (与暗色模式绿色形成对比) */
    --opm-object-state-color: #dfa018;    /* 状态颜色 - 深橙色 (与暗色模式橙色有所区别) */
    
    /* OPM元素背景 */
    --opm-element-bg:var(--color-bg-primary);            /* 图元背景色 */
    --opm-element-bg-hover: #f8f9fa;      /* 图元悬停背景色 */
    
    /* 选中状态调整 */
    --opm-selected-color: #737476;        /* 选中边框颜色 - 深蓝色 */
    --selection-color: #868687;           /* 选择颜色 */
    --selection-bg-color: rgba(0, 64, 133, 0.08);  /* 选择框背景 - 蓝色半透明 */
    --selection-shadow: 0 0 8px 2px rgba(0, 64, 133, 0.15);  /* 选择框阴影 */
    
    /* 连线颜色 */
    --link-color: #3b3434af;                /* 连线颜色 - 纯黑色 (超强对比度) */
    --link-hover-color: #1565c0;          /* 连线悬停颜色 - 深蓝色 (与对象色一致) */
    
    /* 激活状态背景 - 适配亮色模式新颜色方案 */
    --opm-activated-object-bg: rgb(248, 239, 233);    /* 激活对象背景 - 蓝色系 */
    --opm-activated-process-bg: rgb(224, 244, 243);   /* 激活过程背景 - 紫色系 */
    --opm-activated-state-bg: transparent;       /* 激活状态背景 - 橙色系 */
    --opm-activated-text-color: #000000;                   /* 激活状态文字颜色 */
    /* Keep card border light gray in light theme */
    --opm-view-card-border: #c0c0c0;
    
    /* 连接线选中状态 */
    --opm-link-selected-color: #1565c0;   /* 连接线选中颜色 - 深蓝色 (与对象色一致) */
    --opm-link-hover-color: #7b1fa2;      /* 连接悬停颜色 - 深紫色 (与过程色一致) */
    --opm-link-label-color: #0f172a;      /* 连线标签文本颜色 - 深石板色，提升明亮画布可读性 */
    --opm-link-label-stroke: rgba(248, 250, 252, 0.95); /* 连线标签描边 - 浅色描边以保持反差 */
    
    /* 视图颜色在亮色模式下使用不同色彩 */
    --opm-view-color: #5f5f5f;            /* 视图颜色 - 深绿色，与暗色模式形成对比 */
    --opm-view-title-color: var(--color-text-primary);  /* 视图标题文字颜色 - 保持正常对比 */
    --opm-view-title-bg:var(--color-bg-primary);         /* 视图标题背景色 - 与画布背景色相同 */
    /* Card mode in light theme */
    /* Light theme: also match canvas background */
    --opm-view-card-bg: var(--color-bg-primary);
    --opm-view-card-text: #212529;
    --opm-view-card-text-shadow: rgba(255, 255, 255, 0.0);
    
    /* 状态颜色调整 */
    --color-success: #28a745;             /* 成功状态 - 绿色 */
    --color-warning: #ffc107;             /* 警告状态 - 黄色 */
    --color-error: #dc3545;               /* 错误状态 - 红色 */
    --color-info: #17a2b8;                /* 信息状态 - 青色 */
    
    /* 画布网格颜色 */
    --canvas-grid-color: rgba(108, 117, 125, 0.15);  /* 亮色模式网格 - 更浅更柔和 */
    --canvas-grid-color-light: rgba(108, 117, 125, 0.08);

    /* Custom Sidebar for Light Theme */
    --sidebar-light-theme-bg: #f8f9fa; /* Panel background for light surfaces */
    --sidebar-light-theme-text: #212529; /* Dark text for high contrast */
    --sidebar-light-theme-text-secondary: #6c757d; /* Softer secondary text */
    --sidebar-light-theme-border: #dee2e6; /* A subtle border color */
    --sidebar-light-theme-input-bg: #ffffff; /* White input background */
    --sidebar-light-theme-input-border: #ced4da; /* Standard input border */

    /* View Tree Specific */
    --view-tree-selected-bg: var(--color-bg-primary);
    --view-tree-selected-text: var(--color-text-inverse);

    /* 缩放比提示 - 亮色主题 */
    --zoom-feedback-bg: rgba(248, 249, 250, 0.95);
    --zoom-feedback-text: #1565c0;
    --zoom-feedback-border: #1565c0;

    /* 基本字体大小 */
    --base-font-size: 15px; /* Slightly smaller for light theme */
}
/* ===========================================
   暗色主题变量 - Dark Theme Variables
   =========================================== */

[data-theme="dark"] {
    /* 暗色主题保持现有设置 */
    --color-bg-primary: #262728;
    --color-bg-secondary: #282828;
    --color-text-primary: #f0f0f0;
    --color-bg-overlay: rgba(0, 0, 0, 0.8); /* 暗色模式遮罩背景 */
    --canvas-bg-color: var(--color-bg-primary);            /* 暗色画布背景与主背景一致 */
    --canvas-grid-color: rgba(43, 145, 119, 0.15); 
    --canvas-grid-color-light: rgba(43, 145, 119, 0.08);
    
    /* 连线颜色适配暗色模式 */
    --link-color: #8a8888;                    /* 连线颜色 - 亮灰色，在深色背景下可见 */
    --link-hover-color: var(--color-primary); /* 连线悬停颜色 - 使用主色调 */
}


/* ===========================================
   CSS自定义属性辅助类 - CSS Custom Property Utilities
   =========================================== */

/* 调试：显示所有CSS变量（开发时使用） */
.debug-css-vars {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
}

/* 打印CSS变量信息到控制台的辅助脚本 */
/* 在浏览器控制台中运行：
document.documentElement.style.cssText.split(';').filter(s => s.includes('--')).forEach(v => console.log(v.trim()));
*/