/* variables.css - Hệ thống biến thiết kế EdTech (Light & Dark Mode) */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Chủ đạo Xanh dương - Tím EdTech */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-500: #4f46e5;
  --primary-600: #4338ca;
  --primary-700: #3730a3;
  --accent-500: #7c3aed;
  --accent-600: #6d28d9;

  /* Trạng thái ngữ nghĩa */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-500: #10b981;
  --success-600: #059669;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --info-50: #f0f9ff;
  --info-500: #0ea5e9;

  /* Bề mặt Light Mode */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Kích thước & Đổ bóng */
  --sidebar-width: 268px;
  --header-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(79, 70, 229, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
}

[data-theme="dark"] {
  --primary-50: rgba(79, 70, 229, 0.15);
  --primary-100: rgba(79, 70, 229, 0.25);
  --primary-200: rgba(129, 140, 248, 0.35);
  --primary-500: #6366f1;
  --primary-600: #818cf8;
  --primary-700: #a5b4fc;
  --accent-500: #8b5cf6;
  --accent-600: #a78bfa;

  --success-50: rgba(16, 185, 129, 0.15);
  --success-100: rgba(16, 185, 129, 0.25);
  --warning-50: rgba(245, 158, 11, 0.15);
  --warning-100: rgba(245, 158, 11, 0.25);
  --danger-50: rgba(239, 68, 68, 0.15);
  --danger-100: rgba(239, 68, 68, 0.25);
  --info-50: rgba(14, 165, 233, 0.15);

  --bg-body: #0b1120;
  --bg-surface: #1e293b;
  --bg-elevated: #0f172a;
  --bg-glass: rgba(30, 41, 59, 0.88);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --border-strong: #475569;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
}