/* ===== CSS Variables ===== */
:root {
    /* Colors */
    --primary-color: #333333;
    --primary-hover: #555555;
    --primary-active: #444444;
    --secondary-color: #999999;
    --secondary-hover: #888888;
    
    --bg-color: #f8f8f8;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --hover-bg: #f5f5f5;
    
    --text-color: #333333;
    --text-color-normal: #333333;
    --text-color-soft: #535353;
    --text-color-highlight: #222222;
    --text-secondary: #666666;
    --text-tertiary: #aeaeae;
    
    --accent-color: #555555;
    --bg-secondary: #f5f5f5;
    --primary-color-alpha: rgba(51, 51, 51, 0.1);
    --secondary-color-alpha: rgba(153, 153, 153, 0.05);
    
    --border-color: #e0e0e0;
    --border-hover: #cccccc;
    
    /* Button Colors */
    --btn-bg: #333333;
    --btn-color: #ffffff;
    --btn-hover-bg: #555555;
    --btn-secondary-bg: #e6e6e6;
    --btn-secondary-color: #333333;
    --btn-secondary-hover-bg: #d6d6d6;
    
    /* Danger/Delete Button Colors */
    --btn-danger-bg: rgba(255, 77, 79, 0.12);
    --btn-danger-color: #d32f2f;
    --btn-danger-hover-bg: rgba(255, 77, 79, 0.2);
    --btn-danger-border: rgba(255, 77, 79, 0.3);
    
    /* Sync Button Colors */
    --btn-sync-bg: rgba(66, 165, 245, 0.12);
    --btn-sync-color: #1976d2;
    --btn-sync-hover-bg: rgba(66, 165, 245, 0.24);
    --btn-sync-border: rgba(66, 165, 245, 0.3);
    
    /* Effects */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    
    /* Layout */
    --header-height: 80px;
    --border-radius: 6px;
    --transition: all 0.3s ease;
    
    /* Quill Editor */
    --editor-toolbar-border: rgba(0, 0, 0, 0.08);
    --editor-btn-hover-bg: rgba(0, 0, 0, 0.04);
    --editor-btn-active-bg: rgba(0, 0, 0, 0.06);
    --editor-separator: rgba(0, 0, 0, 0.1);
    --editor-tooltip-bg: #ffffff;
    --editor-tooltip-border: rgba(0, 0, 0, 0.12);
    --editor-code-bg: rgba(255, 61, 113, 0.1);
    --editor-code-color: #e83e8c;
    --editor-code-border: rgba(255, 61, 113, 0.2);
    --editor-pre-bg: #f6f8fa;
    --editor-pre-border: rgba(0, 0, 0, 0.08);
    --editor-blockquote-bg: rgba(0, 0, 0, 0.02);
    
    /* Notification Colors - Low Saturation */
    --notification-success: #84b16c;
    --notification-error: #cf6e6e;
    --notification-warning: #f7c05b;
    --notification-info: #64acd9;
    
    /* Confirm Dialog */
    --dialog-overlay: rgba(0, 0, 0, 0.5);
    --dialog-bg: #ffffff;
    --dialog-title: #262626;
    --dialog-message: #595959;
    --dialog-btn-confirm-bg: #333333;
    --dialog-btn-confirm-color: #ffffff;
    --dialog-btn-confirm-hover: #555555;
    --dialog-btn-cancel-bg: #ffffff;
    --dialog-btn-cancel-color: #333333;
    --dialog-btn-cancel-border: #d9d9d9;
    --dialog-btn-cancel-hover-border: #555555;
    --dialog-btn-cancel-hover-color: #555555;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    /* Colors */
    --primary-color: #dedede;
    --primary-hover: #f0f0f0;
    --primary-active: #ffffff;
    --secondary-color: #999999;
    --secondary-hover: #aaaaaa;
    
    --bg-color: #1a1a1a;
    --card-bg: #232323;
    --input-bg: #252525;
    --hover-bg: #2a2a2a;
    
    --text-color: #dddddd;
    --text-color-normal: #dddddd;
    --text-color-soft: #b1b1b1;
    --text-color-highlight: #f5f5f5;
    --text-secondary: #999999;
    --text-tertiary: #666666;
    
    --accent-color: #f0f0f0;
    --bg-secondary: #2a2a2a;
    --primary-color-alpha: rgba(224, 224, 224, 0.1);
    --secondary-color-alpha: rgba(153, 153, 153, 0.05);
    
    --border-color: #3a3a3a;
    --border-hover: #4a4a4a;
    
    /* Button Colors */
    --btn-bg: #333333;
    --btn-color: #ffffff;
    --btn-hover-bg: #4a4a4a;
    --btn-secondary-bg: #363636;
    --btn-secondary-color: #b6b6b6;
    --btn-secondary-hover-bg: #4a4a4a;
    
    /* Danger/Delete Button Colors - Dark Theme */
    --btn-danger-bg: rgba(255, 105, 107, 0.1);
    --btn-danger-color: #cb5151;
    --btn-danger-hover-bg: rgba(255, 105, 107, 0.2);
    --btn-danger-border: rgba(255, 105, 107, 0.35);
    
    /* Sync Button Colors - Dark Theme */
    --btn-sync-bg: rgba(100, 181, 246, 0.18);
    --btn-sync-color: #64b5f6;
    --btn-sync-hover-bg: rgba(100, 181, 246, 0.32);
    --btn-sync-border: rgba(100, 181, 246, 0.35);
    
    /* Effects */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    
    /* Quill Editor - Dark Theme */
    --editor-toolbar-border: rgba(255, 255, 255, 0.06);
    --editor-btn-hover-bg: rgba(255, 255, 255, 0.06);
    --editor-btn-active-bg: rgba(255, 255, 255, 0.1);
    --editor-separator: rgba(255, 255, 255, 0.1);
    --editor-tooltip-bg: #2a2a2a;
    --editor-tooltip-border: rgba(255, 255, 255, 0.12);
    --editor-code-bg: rgba(255, 121, 198, 0.15);
    --editor-code-color: #ff79c6;
    --editor-code-border: rgba(255, 121, 198, 0.25);
    --editor-pre-bg: #1a1a1a;
    --editor-pre-border: rgba(255, 255, 255, 0.08);
    --editor-blockquote-bg: rgba(255, 255, 255, 0.05);
    
    /* Notification Colors - Dark Theme - Low Saturation */
    --notification-success: #4c825d;
    --notification-error: #aa4f4f;
    --notification-warning: #bd8550;
    --notification-info: #54659e;
    
    /* Confirm Dialog - Dark Theme */
    --dialog-overlay: rgba(0, 0, 0, 0.7);
    --dialog-bg: #232323;
    --dialog-title: #dddddd;
    --dialog-message: #b1b1b1;
    --dialog-btn-confirm-bg: #333333;
    --dialog-btn-confirm-color: #ffffff;
    --dialog-btn-confirm-hover: #4a4a4a;
    --dialog-btn-cancel-bg: #232323;
    --dialog-btn-cancel-color: #b6b6b6;
    --dialog-btn-cancel-border: #3a3a3a;
    --dialog-btn-cancel-hover-border: #4a4a4a;
    --dialog-btn-cancel-hover-color: #dddddd;
}