/* =====================================================================
   Chankhoa.Pro — Design Tokens (single source of truth)
   Phong cách: Indigo Minimal. KHÔNG hardcode màu ở nơi khác — dùng các
   biến trong file này. Mặc định = Sáng; [data-theme="dark"] = Tối;
   no-JS fallback theo prefers-color-scheme.
   ===================================================================== */

:root {
  /* ---- Primitive palette (không dùng trực tiếp ngoài file này) ---- */
  --c-indigo-50:#eef2ff;  --c-indigo-100:#e0e7ff; --c-indigo-200:#c7d2fe;
  --c-indigo-300:#a5b4fc; --c-indigo-400:#818cf8; --c-indigo-500:#6366f1;
  --c-indigo-600:#4f46e5; --c-indigo-700:#4338ca; --c-indigo-800:#3730a3;
  --c-violet-500:#8b5cf6; --c-violet-600:#7c3aed;
  --c-fuchsia-500:#d946ef; --c-fuchsia-600:#c026d3;

  --c-slate-50:#f8fafc;  --c-slate-100:#f1f5f9; --c-slate-200:#e2e8f0;
  --c-slate-300:#cbd5e1; --c-slate-400:#94a3b8; --c-slate-500:#64748b;
  --c-slate-600:#475569; --c-slate-700:#334155; --c-slate-800:#1e293b;
  --c-slate-900:#0f172a; --c-ink:#0b1020;

  --c-emerald-50:#ecfdf5; --c-emerald-500:#10b981; --c-emerald-600:#059669;
  --c-amber-400:#fbbf24;  --c-amber-500:#f59e0b;
  --c-red-50:#fef2f2;     --c-red-500:#ef4444;    --c-red-600:#dc2626;
  --c-sky-500:#0ea5e9;

  /* ---- Brand (giữ nguyên trên cả 2 theme) ---- */
  --primary:var(--c-indigo-600);
  --primary-hover:var(--c-indigo-700);
  --primary-contrast:#ffffff;
  --violet:var(--c-violet-600);
  --fuchsia:var(--c-fuchsia-600);
  --grad:linear-gradient(120deg,var(--c-indigo-600),var(--c-violet-600) 55%,var(--c-fuchsia-600));
  --grad-soft:linear-gradient(120deg,rgba(79,70,229,.16),rgba(192,38,211,.12));

  /* ---- Semantic màu trạng thái ---- */
  --success:var(--c-emerald-500);
  --success-strong:var(--c-emerald-600);
  --warning:var(--c-amber-500);
  --danger:var(--c-red-500);
  --danger-strong:var(--c-red-600);
  --info:var(--c-sky-500);

  /* ---- Surfaces & text (Sáng) ---- */
  --bg:#eef1f8;
  --bg-tint:#e4e9f4;
  --surface:#ffffff;
  --surface-2:#f8f9fd;
  --surface-3:#eef1f8;
  --ink:var(--c-slate-900);
  --body:var(--c-slate-600);
  --muted:var(--c-slate-400);
  --heading:var(--c-slate-900);
  --border:#d5dbea;
  --border-strong:#c2cbe0;
  --primary-soft:var(--c-indigo-50);
  --primary-soft-border:var(--c-indigo-100);
  --on-primary-soft:var(--c-indigo-700);

  /* màu chữ trên nền brand/gradient (như status pill) */
  --on-brand:#ffffff;

  /* ---- Elevation / shadow ---- */
  --ring:0 1px 2px rgba(11,16,32,.07), 0 12px 32px rgba(79,70,229,.12);
  --ring-lg:0 28px 56px -18px rgba(79,70,229,.26);
  --ring-sm:0 1px 3px rgba(11,16,32,.08), 0 4px 12px rgba(79,70,229,.06);

  /* ---- Radius ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; --sp-11:96px;

  /* ---- Typography ---- */
  --font-sans:'Be Vietnam Pro','Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:.78rem; --fs-sm:.88rem; --fs-base:1rem; --fs-md:1.06rem;
  --fs-lg:1.2rem; --fs-xl:1.5rem; --fs-2xl:1.9rem; --fs-3xl:2.4rem; --fs-4xl:clamp(2.3rem,6vw,4rem);
  --lh-tight:1.12; --lh-snug:1.35; --lh-base:1.65;
  --tracking-tight:-.02em;

  /* ---- Motion ---- */
  --t-fast:.15s ease; --t:.22s cubic-bezier(.2,.7,.2,1); --t-slow:.4s cubic-bezier(.2,.7,.2,1);

  /* ---- Layout ---- */
  --container:1140px;
  --header-h:70px;
  --site-header-offset:var(--header-h);
  --bottom-nav-h:calc(72px + env(safe-area-inset-bottom,0px));
  --sidebar-w:264px;

  /* ---- Patterns ---- */
  --dot:rgba(79,70,229,.10);
}

/* ===================== DARK THEME ===================== */
:root[data-theme="dark"] {
  --bg:#080a14;
  --bg-tint:#0c101e;
  --surface:#13172c;
  --surface-2:#1a1f3a;
  --surface-3:#222847;
  --ink:#f3f5fb;
  --body:#b3bbd4;
  --muted:#7c84a3;
  --heading:#ffffff;
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.22);

  --primary:var(--c-indigo-500);
  --primary-hover:var(--c-indigo-400);
  --primary-soft:rgba(99,102,241,.16);
  --primary-soft-border:rgba(99,102,241,.28);
  --on-primary-soft:var(--c-indigo-200);

  --grad-soft:linear-gradient(120deg,rgba(99,102,241,.26),rgba(192,38,211,.16));
  --ring:0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55);
  --ring-lg:0 32px 64px -20px rgba(0,0,0,.75);
  --ring-sm:0 1px 3px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
  --dot:rgba(129,140,248,.14);
}

/* No-JS fallback: theo hệ điều hành (khi chưa set data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#080a14;
    --bg-tint:#0c101e;
    --surface:#13172c;
    --surface-2:#1a1f3a;
    --surface-3:#222847;
    --ink:#f3f5fb;
    --body:#b3bbd4;
    --muted:#7c84a3;
    --heading:#ffffff;
    --border:rgba(255,255,255,.12);
    --border-strong:rgba(255,255,255,.22);
    --primary:var(--c-indigo-500);
    --primary-hover:var(--c-indigo-400);
    --primary-soft:rgba(99,102,241,.16);
    --primary-soft-border:rgba(99,102,241,.28);
    --on-primary-soft:var(--c-indigo-200);
    --grad-soft:linear-gradient(120deg,rgba(99,102,241,.26),rgba(192,38,211,.16));
    --ring:0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55);
    --ring-lg:0 32px 64px -20px rgba(0,0,0,.75);
    --ring-sm:0 1px 3px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
    --dot:rgba(129,140,248,.14);
  }
}