/* ============================================================
   QLUV V2 — Design tokens (dark + light). Nguồn duy nhất cho
   màu / khoảng cách / bo góc / bóng đổ / typography. Mọi component
   tham chiếu biến ở đây để đồng bộ và đổi theme tức thì.
   ============================================================ */
:root {
  /* Thang màu thương hiệu */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6ff;
  --brand-300: #93b4ff;
  --brand-500: #4f7cff;
  --brand-600: #3b63e0;
  --brand-700: #2f4fc0;

  /* Semantic (dùng cho chip/score/kpi) */
  --ok:      #22c55e;
  --ok-bg:   #052e16;
  --warn:    #f59e0b;
  --warn-bg: #3a2606;
  --danger:  #ef4444;
  --danger-bg:#3a0a0a;
  --info:    #38bdf8;

  /* Bán kính + bóng + chuyển động */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.18);
  --shadow-2: 0 6px 20px rgba(0,0,0,.28);
  --shadow-3: 0 18px 48px rgba(0,0,0,.40);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .18s;

  /* Khoảng cách (thang 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px;
}

/* ---- DARK (mặc định) ---- */
:root, [data-theme="dark"] {
  --bg:        #0b0f1a;
  --bg-2:      #111827;
  --surface:   #151d2e;
  --surface-2: #1b2436;
  --card:      #162033;
  --line:      #26324a;
  --line-2:    #334156;
  --text:      #e8eef9;
  --text-2:    #aebbd4;
  --muted:     #6b7a99;
  --primary:   var(--brand-500);
  --primary-weak: rgba(79,124,255,.14);
  --ring:      rgba(79,124,255,.45);
}

/* ---- LIGHT ---- */
[data-theme="light"] {
  --bg:        #f4f6fb;
  --bg-2:      #eef1f8;
  --surface:   #ffffff;
  --surface-2: #f7f9fd;
  --card:      #ffffff;
  --line:      #e2e8f2;
  --line-2:    #cdd8ea;
  --text:      #0f1b30;
  --text-2:    #43526d;
  --muted:     #8493ad;
  --primary:   var(--brand-600);
  --primary-weak: rgba(59,99,224,.10);
  --ring:      rgba(59,99,224,.35);
  --shadow-1: 0 1px 2px rgba(16,27,48,.08), 0 1px 3px rgba(16,27,48,.06);
  --shadow-2: 0 8px 24px rgba(16,27,48,.10);
  --shadow-3: 0 18px 48px rgba(16,27,48,.16);
}