/* ==========================================================================
   Sigologin — Design tokens
   --------------------------------------------------------------------------
   Bang mau lay TRUNG voi desktop app (desktop/src/styles.css). Web va app
   phai trong nhu mot san pham; khach chuyen qua lai giua hai ben lien tuc.

   Quy tac: khong bao gio viet ma mau truc tiep trong file khac. Moi mau deu
   phai di qua bien o day.

   BA TRANG THAI THEME:
     1. Khach chua chon      -> theo prefers-color-scheme cua he dieu hanh
     2. Khach chon "sang"    -> html[data-theme="light"]
     3. Khach chon "toi"     -> html[data-theme="dark"]
   Mac dinh cua :root la TOI, vi day la cong cu ky thuat va da so khach dung
   ban dem. Khoi @media ben duoi lo cho truong hop he dieu hanh dang sang.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Nen, theo do sau --- */
  --bg: #0b0f19;
  --bg-soft: #0e1420;
  --panel: #111827;
  --panel-2: #151d2c;
  --line: #1f2937;
  --line-soft: #172032;

  /* --- Chu --- */
  --text: #e5e7eb;
  --text-dim: #9ca3af;
  --muted: #6b7280;

  /* --- Mau nhan dien --- */
  --accent: #38bdf8;
  --accent-2: #6366f1;
  --accent-ink: #ffffff;      /* chu tren nen accent */

  /* --- Trang thai --- */
  --ok: #10b981;
  --ok-bg: rgba(16, 185, 129, 0.10);
  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.10);
  --err: #ef4444;
  --err-bg: rgba(239, 68, 68, 0.10);
  --info-bg: rgba(56, 189, 248, 0.10);

  /* --- Hieu ung phu thuoc theme --- */
  --glow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 8px 32px rgba(56, 189, 248, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --hero-glow: rgba(56, 189, 248, 0.13);
  --header-bg: rgba(11, 15, 25, 0.85);
  --hover-tint: rgba(255, 255, 255, 0.02);
  --orbit-ring: rgba(148, 163, 184, 0.18);
  --orbit-core: linear-gradient(145deg, #1a2436, #0f1725);

  /* --- Chu viet --- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;
  --fs-4xl: 56px;

  /* --- Khoang cach: thang 4px --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* --- Bo goc --- */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* --- Bo cuc --- */
  --container: 1180px;
  --sidebar: 232px;
  --header-h: 60px;
}

/* --------------------------------------------------------------------------
   THEME SANG
   Chi dinh nghia LAI nhung bien doi mau. Moi bien khac ke thua tu :root,
   nen them mot bien moi o tren khong bao gio lam vo theme sang.
   -------------------------------------------------------------------------- */

/* (2) Khach chon sang tuong minh */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f8fc;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f5fb;
  --line: #e2e8f2;
  --line-soft: #eef2f8;

  --text: #0f172a;
  --text-dim: #475569;
  --muted: #7a8699;

  /* Accent phai dam hon tren nen sang moi du tuong phan cho chu trang */
  --accent: #2563eb;
  --accent-2: #4f46e5;
  --accent-ink: #ffffff;

  --ok: #059669;   --ok-bg: rgba(5, 150, 105, 0.09);
  --warn: #b45309; --warn-bg: rgba(180, 83, 9, 0.09);
  --err: #dc2626;  --err-bg: rgba(220, 38, 38, 0.08);
  --info-bg: rgba(37, 99, 235, 0.07);

  --glow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 10px 34px rgba(37, 99, 235, 0.10);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 14px 44px rgba(15, 23, 42, 0.10);
  --hero-glow: rgba(37, 99, 235, 0.10);
  --header-bg: rgba(246, 248, 252, 0.88);
  --hover-tint: rgba(15, 23, 42, 0.025);
  --orbit-ring: rgba(100, 116, 139, 0.20);
  --orbit-core: linear-gradient(145deg, #ffffff, #eef3fb);
}

/* (1) Khach chua chon + he dieu hanh dang sang */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #f6f8fc;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-2: #f1f5fb;
    --line: #e2e8f2;
    --line-soft: #eef2f8;

    --text: #0f172a;
    --text-dim: #475569;
    --muted: #7a8699;

    --accent: #2563eb;
    --accent-2: #4f46e5;
    --accent-ink: #ffffff;

    --ok: #059669;   --ok-bg: rgba(5, 150, 105, 0.09);
    --warn: #b45309; --warn-bg: rgba(180, 83, 9, 0.09);
    --err: #dc2626;  --err-bg: rgba(220, 38, 38, 0.08);
    --info-bg: rgba(37, 99, 235, 0.07);

    --glow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 10px 34px rgba(37, 99, 235, 0.10);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 14px 44px rgba(15, 23, 42, 0.10);
    --hero-glow: rgba(37, 99, 235, 0.10);
    --header-bg: rgba(246, 248, 252, 0.88);
    --hover-tint: rgba(15, 23, 42, 0.025);
    --orbit-ring: rgba(100, 116, 139, 0.20);
    --orbit-core: linear-gradient(145deg, #ffffff, #eef3fb);
  }
}

/* Ton trong nguoi dung tat hieu ung chuyen dong. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}