/* ============================================================
   VARIABLES.CSS — Design Tokens & CSS Custom Properties
   TimĐạiHọc Design System v2.0
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --primary:       #6C3CE4;
  --primary-light: #8B5CF6;
  --primary-dark:  #5B21B6;
  --secondary:     #F5A623;
  --secondary-light: #FCD34D;
  --accent:        #00D4AA;
  --accent-light:  #34D399;

  /* ── Background ── */
  --bg-body:    #0D0D1A;
  --bg-surface: #16182A;
  --bg-card:    rgba(22, 24, 42, 0.8);
  --bg-input:   rgba(255, 255, 255, 0.05);
  --bg-hover:   rgba(108, 60, 228, 0.1);
  --bg-overlay: rgba(13, 13, 26, 0.85);

  /* ── Text ── */
  --text-primary:   #F0F0F5;
  --text-secondary: #A8ABBE;
  --text-muted:     #6B7280;

  /* ── Border ── */
  --border:       rgba(255, 255, 255, 0.08);
  --border-focus: rgba(108, 60, 228, 0.6);
  --border-hover: rgba(108, 60, 228, 0.3);

  /* ── Semantic ── */
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #3B82F6;

  /* ── Ngũ Hành ── */
  --ngh-kim:      #C0CA33;
  --ngh-kim-bg:   rgba(192, 202, 51, 0.12);
  --ngh-moc:      #66BB6A;
  --ngh-moc-bg:   rgba(102, 187, 106, 0.12);
  --ngh-thuy:     #29B6F6;
  --ngh-thuy-bg:  rgba(41, 182, 246, 0.12);
  --ngh-hoa:      #EF5350;
  --ngh-hoa-bg:   rgba(239, 83, 80, 0.12);
  --ngh-tho:      #FFA726;
  --ngh-tho-bg:   rgba(255, 167, 38, 0.12);

  /* ── Gradients ── */
  --gradient-hero:    linear-gradient(135deg, #1a0533 0%, #0D0D1A 50%, #001a33 100%);
  --gradient-primary: linear-gradient(135deg, #6C3CE4 0%, #4F46E5 100%);
  --gradient-gold:    linear-gradient(135deg, #F5A623 0%, #F59E0B 100%);
  --gradient-text:    linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #e879f9 100%);
  --gradient-card:    linear-gradient(135deg, rgba(108,60,228,0.15) 0%, rgba(0,212,170,0.05) 100%);

  /* ── Glassmorphism ── */
  --glass-bg:     rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(12px);
  --glass-shadow: 0 4px 24px rgba(108, 60, 228, 0.15);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 4px 24px rgba(108, 60, 228, 0.35);
  --shadow-gold: 0 4px 24px rgba(245, 166, 35, 0.3);
  --shadow-teal: 0 4px 24px rgba(0, 212, 170, 0.25);

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl:32px;
  --radius-full: 9999px;

  /* ── Spacing (4px grid) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Typography ── */
  --font-main:   'Be Vietnam Pro', sans-serif;
  --font-mono:   'Inter', monospace;
  --lh-body:     1.65;
  --lh-heading:  1.2;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   40px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;

  /* ── Transitions ── */
  --transition:       all 0.3s ease;
  --transition-fast:  all 0.15s ease;
  --transition-slow:  all 0.5s ease;

  /* ── Z-index ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-overlay: 500;

  /* ── Navbar ── */
  --navbar-h:        64px;
  --navbar-h-mobile: 56px;
  --bottom-nav-h:    60px;
}

/* ── Light Theme Override ── */
[data-theme="light"] {
  --bg-body:    #F5F5FF;
  --bg-surface: #FFFFFF;
  --bg-card:    rgba(255, 255, 255, 0.95);
  --bg-input:   #F8F5FF;
  --bg-hover:   rgba(108, 60, 228, 0.06);
  --bg-overlay: rgba(245, 245, 255, 0.92);

  --text-primary:   #1A192E;
  --text-secondary: #4B4D6E;
  --text-muted:     #8B8FA8;

  --border:       rgba(108, 60, 228, 0.12);
  --border-focus: rgba(108, 60, 228, 0.5);
  --border-hover: rgba(108, 60, 228, 0.25);

  --bg-dark: #F5F5FF;

  --glass-bg:     rgba(255, 255, 255, 0.7);
  --glass-border: rgba(108, 60, 228, 0.15);
  --glass-shadow: 0 4px 24px rgba(108, 60, 228, 0.1);

  --shadow-sm: 0 1px 4px rgba(108,60,228,0.08);
  --shadow-md: 0 4px 16px rgba(108,60,228,0.12);
  --shadow-lg: 0 8px 32px rgba(108,60,228,0.15);

  --gradient-hero: linear-gradient(135deg, #f0ebff 0%, #F5F5FF 50%, #e8f5ff 100%);
  --gradient-card: linear-gradient(135deg, rgba(108,60,228,0.06) 0%, rgba(0,212,170,0.03) 100%);

  --ngh-kim-bg:   rgba(192, 202, 51, 0.1);
  --ngh-moc-bg:   rgba(102, 187, 106, 0.1);
  --ngh-thuy-bg:  rgba(41, 182, 246, 0.1);
  --ngh-hoa-bg:   rgba(239, 83, 80, 0.1);
  --ngh-tho-bg:   rgba(255, 167, 38, 0.1);
}