/* =====================================================
   DESIGN SYSTEM - CSS Variables
   Biến thiết kế cho toàn bộ ứng dụng Paged Publisher
   ===================================================== */

:root {
    /* ═════════════════════════════════════════════════
       🎨 COLOR PALETTE - Dark Theme
       ═════════════════════════════════════════════════ */
    
    /* ─── Background Colors ─────────────────────────── */
    --bg-primary: #1e1e1e;           /* Nền chính */
    --bg-secondary: #252526;         /* Nền phụ (sidebar, toolbar) */
    --bg-tertiary: #2d2d30;          /* Nền thứ 3 (modal, card) */
    --bg-elevated: #3c3c3c;          /* Nền nổi lên */
    --bg-hover: #2a2d2e;             /* Nền khi hover */
    --bg-active: #37373d;            /* Nền khi active */
    
    /* ─── Border Colors ─────────────────────────────── */
    --border-primary: #3e3e42;       /* Viền chính */
    --border-secondary: #4e4e52;     /* Viền phụ */
    --border-focus: #0e639c;         /* Viền khi focus/active */
    
    /* ─── Text Colors ───────────────────────────────── */
    --text-primary: #cccccc;         /* Text chính */
    --text-secondary: #858585;       /* Text phụ */
    --text-tertiary: #6a6a6a;        /* Text mờ (hint) */
    --text-white: #ffffff;           /* Text trắng */
    --text-muted: #999999;           /* Text mờ */
    --text-inverse: #1e1e1e;         /* Text đảo ngược (trên nền sáng) */
    
    /* ─── Accent Colors ─────────────────────────────── */
    --accent-primary: #0e639c;       /* Màu nhấn chính (xanh dương) */
    --accent-primary-hover: #1177bb; /* Màu nhấn hover */
    --accent-primary-active: #094771;/* Màu nhấn active */
    --accent-secondary: #8b6b4f;     /* Màu nhấn phụ (nâu) */
    
    /* ─── Status Colors ─────────────────────────────── */
    --status-success: #a5d6a7;       /* Thành công (xanh lá) */
    --status-success-bg: #1e2a1e;    /* Nền thành công */
    
    --status-error: #ef9a9a;         /* Lỗi (đỏ) */
    --status-error-bg: #2a1e1e;      /* Nền lỗi */
    --status-error-border: #a85a3c;  /* Viền lỗi */
    
    --status-warning: #ffcc80;       /* Cảnh báo (cam) */
    --status-warning-bg: #2a251e;    /* Nền cảnh báo */
    
    --status-info: #90caf9;          /* Thông tin (xanh) */
    --status-info-bg: #1e2230;       /* Nền thông tin */
    
    --status-modified: #f48771;      /* Đã sửa đổi */
    
    /* ─── Interactive States ────────────────────────── */
    --interactive-hover: rgba(255, 255, 255, 0.1);
    --interactive-active: rgba(255, 255, 255, 0.15);
    --interactive-disabled: rgba(255, 255, 255, 0.3);
    
    /* ─── Overlay ───────────────────────────────────── */
    --overlay-light: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-heavy: rgba(0, 0, 0, 0.85);
    
    
    /* ═════════════════════════════════════════════════
       📏 SPACING - Consistent spacing scale
       ═════════════════════════════════════════════════ */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 10px;
    --space-xl: 12px;
    --space-2xl: 16px;
    --space-3xl: 20px;
    --space-4xl: 24px;
    --space-5xl: 32px;
    --space-6xl: 40px;
    --space-7xl: 48px;
    
    
    /* ═════════════════════════════════════════════════
       📐 SIZING - Component dimensions
       ═════════════════════════════════════════════════ */
    
    /* ─── Layout Dimensions ─────────────────────────── */
    --toolbar-height: 56px;
    --toolbar-height-mobile: 52px;
    --editor-header-height: 48px;
    --editor-header-height-mobile: 44px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 0px;
    
    /* ─── Icon Sizes ────────────────────────────────── */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 48px;
    --icon-3xl: 64px;
    
    /* ─── Button Heights ────────────────────────────── */
    --button-height: 100%;
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    
    
    /* ═════════════════════════════════════════════════
       🔤 TYPOGRAPHY - Font settings
       ═════════════════════════════════════════════════ */
    
    /* ─── Font Families ─────────────────────────────── */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                        "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", 
                        Consolas, "Courier New", monospace;
    
    /* ─── Font Sizes ────────────────────────────────── */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 19px;
    --font-size-2xl: 22px;
    --font-size-3xl: 26px;
    --font-size-4xl: 30px;
    
    /* ─── Font Weights ──────────────────────────────── */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ─── Line Heights ──────────────────────────────── */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    
    /* ═════════════════════════════════════════════════
       🔲 BORDERS - Border radius and widths
       ═════════════════════════════════════════════════ */
    
    /* ─── Border Radius ─────────────────────────────── */
    --radius-none: 0;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* ─── Border Widths ─────────────────────────────── */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-thicker: 3px;
    
    
    /* ═════════════════════════════════════════════════
       🌑 SHADOWS - Box shadows
       ═════════════════════════════════════════════════ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);
    
    
    /* ═════════════════════════════════════════════════
       ⚡ TRANSITIONS - Animation durations & easing
       ═════════════════════════════════════════════════ */
    
    /* ─── Durations ─────────────────────────────────── */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-medium: 0.3s;
    --transition-slow: 0.4s;
    
    /* ─── Easing Functions ──────────────────────────── */
    --easing-default: ease;
    --easing-in: ease-in;
    --easing-out: ease-out;
    --easing-in-out: ease-in-out;
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    
    /* ═════════════════════════════════════════════════
       📚 Z-INDEX - Stacking order (từ thấp đến cao)
       ═════════════════════════════════════════════════ */
    --z-base: 0;                     /* Nền mặc định */
    --z-toolbar: 50;                 /* Thanh công cụ */
    --z-sidebar-overlay: 99;         /* Overlay của sidebar (mobile) */
    --z-sidebar: 100;                /* Sidebar */
    --z-sidebar-mobile: 101;         /* Sidebar trên mobile */
    --z-dropdown: 100;               /* Dropdown menu */
    --z-sticky: 200;                 /* Phần tử sticky */
    --z-fixed: 300;                  /* Phần tử fixed */
    --z-modal-backdrop: 1000;        /* Backdrop của modal */
    --z-toast: 9000;                 /* Toast notification / Status bar */
    --z-modal: 10000;                /* Modal / Overlay cao nhất */
    
    
    /* ═════════════════════════════════════════════════
       🔧 LEGACY COMPATIBILITY
       Các biến cũ để tương thích với code cũ
       ═════════════════════════════════════════════════ */
    --toolbar-bg: var(--bg-secondary);
    --toolbar-border: var(--border-primary);
    --sidebar-bg: var(--bg-secondary);
    --sidebar-border: var(--border-primary);
    --sidebar-item-hover: var(--bg-hover);
    --sidebar-item-active: var(--bg-active);
    --sidebar-accent: var(--accent-primary);
    --close-hover: #464647;
    --btn-hover: var(--bg-active);
    --btn-active: var(--accent-primary-active);
    --btn-primary: var(--accent-primary);
    --btn-primary-hover: var(--accent-primary-hover);
}


/* ═════════════════════════════════════════════════════
   📖 USAGE GUIDE
   ═══════════════════════════════════════════════════════

   🎨 COLORS
   ─────────────────────────────────────────────────────
   Background:    var(--bg-primary), var(--bg-secondary)
   Text:          var(--text-primary), var(--text-secondary)
   Accent:        var(--accent-primary)
   Status:        var(--status-success), var(--status-error)
   
   📏 SPACING
   ─────────────────────────────────────────────────────
   Margin/Padding: var(--space-md), var(--space-xl)
   Gap:            var(--space-lg)
   
   📐 SIZING
   ─────────────────────────────────────────────────────
   Icons:         var(--icon-md), var(--icon-lg)
   Buttons:       var(--button-height-md)
   
   🔤 TYPOGRAPHY
   ─────────────────────────────────────────────────────
   Font:          var(--font-family-base)
   Size:          var(--font-size-md)
   Weight:        var(--font-weight-medium)
   
   🔲 BORDERS
   ─────────────────────────────────────────────────────
   Radius:        var(--radius-md)
   Width:         var(--border-width)
   Color:         var(--border-primary)
   
   🌑 SHADOWS
   ─────────────────────────────────────────────────────
   Box Shadow:    var(--shadow-md), var(--shadow-lg)
   
   ⚡ TRANSITIONS
   ─────────────────────────────────────────────────────
   Duration:      var(--transition-base)
   Easing:        var(--easing-out)
   
   📚 Z-INDEX
   ─────────────────────────────────────────────────────
   Modal:         var(--z-modal)
   Toast:         var(--z-toast)
   Dropdown:      var(--z-dropdown)
   
   ═════════════════════════════════════════════════════ */