/* ==========================================================================
   Q1 DESIGN TOKENS — CHUẨN BRAND-01 BOTCAKE UI SYSTEM (PRJ-KDAN)
   Thống nhất nhận diện: Cyber Dark Navy + Restrained Neon + Precision Ergonomics
   Tham chiếu: BRAND-01, TOKEN-01, FOUNDATION-01
   ========================================================================== */

:root {
  /* 01. NỀN & BỀ MẶT (BACKGROUND & SURFACES - BRAND-01) */
  --bg-obsidian: #060B14;          /* Đen obsidian sâu thẳm */
  --bg-main: #0B1424;              /* Navy nền chính app */
  --bg-surface: #0F1F3A;           /* Navy bề mặt thẻ */
  --bg-surface-elevated: #162846;  /* Navy nổi bật khi hover/active */
  --bg-deep-blue: #153B7A;         /* Xanh dương sâu */
  --bg-card: #1E293B;              /* Xám navy nền thẻ chuẩn */

  /* 02. BẢNG MÀU SẮC CHỦ ĐẠO & NEON (COLOR PALETTE - BRAND-01) */
  --color-primary: #2D7BFF;        /* Xanh điện (Primary CTA, Active nav) */
  --color-primary-hover: #1e62d4;  /* Hover state của primary */
  --color-cyan: #00E5FF;           /* Electric Cyan (Accent, Links, Pulse gauge) */
  --color-cyan-glow: rgba(0, 229, 255, 0.4);
  
  /* 3 Cung Radar Chuẩn HOME-01 */
  --color-emerald: #10B981;        /* Cung VẬN HÀNH (Emerald Neon) */
  --color-violet: #8B5CF6;         /* Cung CẢI TIẾN (Violet Neon) */
  --color-cyan-radar: #06B6D4;     /* Cung QUAN SÁT (Cyan Neon) */
  
  /* Trạng thái nghiệp vụ */
  --color-success: #10B981;        /* Thành công (Verified, Online) */
  --color-warning: #F59E0B;        /* Cảnh báo (Attention, Waiting) */
  --color-danger: #EF4444;         /* Nguy hiểm (Blocked, Error) */
  --color-rose: #F43F5E;           /* Hồng đỏ sang trọng (Cần chị xử lý B-01) */
  --color-learning: #8B5CF6;       /* Tím học hỏi (AI, Intent, Candidate) */
  --color-pink: #EC4899;           /* Hồng phấn */

  /* 03. MÀU CHỮ & VIỀN (TYPOGRAPHY & BORDERS) */
  --text-main: #E5E7EB;            /* Trắng khói chữ chính */
  --text-secondary: #94A3B8;       /* Xám bạc chữ phụ */
  --text-muted: #64748B;          /* Xám mờ ghi chú */
  --color-white: #FFFFFF;          /* Trắng tinh khiết */
  --border-color: #334155;         /* Viền xám trung tính */
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* 04. CYBER GLASSMORPHISM (THỦY TINH MỜ ĐA CHIỀU) */
  --glass-blur: blur(16px);
  --bg-glass-card: rgba(15, 31, 58, 0.85);
  --bg-glass-subtle: rgba(11, 20, 36, 0.65);
  --bg-glass-overlay: rgba(6, 11, 20, 0.88);
  --bg-glass-sheet: rgba(15, 31, 58, 0.95);
  
  --border-glass: rgba(51, 65, 85, 0.6);
  --border-glass-bright: rgba(45, 123, 255, 0.35);
  --border-glass-cyan: rgba(0, 229, 255, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);

  /* 05. KHOẢNG CÁCH & BO GÓC (SPACING & RADIUS) */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* 06. HIỆU ỨNG NĂNG LƯỢNG NEON (GLOW & SHADOWS) */
  --glow-sm: 0 0 8px rgba(0, 229, 255, 0.25);
  --glow-md: 0 0 16px rgba(0, 229, 255, 0.35);
  --glow-lg: 0 0 24px rgba(0, 229, 255, 0.45);
  --glow-emerald: 0 0 16px rgba(16, 185, 129, 0.4);
  --glow-violet: 0 0 16px rgba(139, 92, 246, 0.4);
  --glow-rose: 0 0 16px rgba(244, 63, 94, 0.4);
  --glow-primary: 0 4px 18px rgba(45, 123, 255, 0.4);
  --glow-green: 0 0 10px rgba(16, 217, 129, 0.4);

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-card-elevated: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(45, 123, 255, 0.15);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(51, 65, 85, 0.5);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(51, 65, 85, 0.8);

  /* 07. TRẠNG THÁI BADGES CHUẨN KỸ THUẬT */
  --badge-running: #2D7BFF;
  --badge-waiting: #F59E0B;
  --badge-need-owner: #F97316;
  --badge-blocked: #EF4444;
  --badge-learning: #8B5CF6;
  --badge-completed: #10D981;

  /* 08. PHÂN TẦNG Z-INDEX (FOUNDATION-01) */
  --z-base: 1;
  --z-card: 2;
  --z-elevated: 10;
  --z-header: 20;
  --z-nav: 30;
  --z-sheet-backdrop: 90;
  --z-bottom-sheet: 100;
  --z-modal-backdrop: 190;
  --z-modal: 200;
  --z-toast: 300;

  /* 09. KÍCH THƯỚC CHUẨN CANVAS (CANONICAL VIEWPORT) */
  --mobile-width: 390px;
  --mobile-height: 100dvh;
}