/* tokens.css — BO MAU DUNG CHUNG cho ca hai trang: Tra cuu (index.html) va
   PipeCal (pipecal/index.html, chay trong <iframe>).

   Ngon ngu thiet ke lay theo "Wall Panel Design Language": nen diu, the bo
   tron lon, mot so to tren mot nhan mo nho, va MOI MAU MANG MOT NGHIA:
     --wp-ok      xanh la  : dang chon, dung, xong   (giu mau nhan dien cu cua du an)
     --wp-home    xanh lam : thong tin, lien ket, tong ID
     --wp-ev      xanh ngoc: dien tich
     --wp-solar   ho phach : can chu y, canh bao nhe
     --wp-accent  tim      : phu, nhan manh thu cap
     --wp-heat    cam      : khoi luong
     --wp-act     do       : loi, can xu ly ngay
     --wp-brand   do tham  : MAU THUONG HIEU — vach nhan dau trang, khoi tieu de
                             ban ve, dau tieu chuan. Chi dung de "dong khung",
                             khong to nen dien rong, khong dung cho trang thai.
   Nen mau "mem" = cung mau o do mo ~14%.

   Moi bien deu co tien to --wp- de KHONG dam vao bien rieng cua tung ung dung
   (hai ung dung dung trung 8 ten bien — xem chu thich cuoi style.css).
   Khong font ngoai (luat L7): Unbounded / Plus Jakarta Sans cua ban mau duoc
   thay bang font he thong, so dung chu so dong deu (tabular-nums). */

:root,
:root[data-theme="light"] {
  --wp-ground: #eef3f8;
  --wp-glow-1: rgba(22, 131, 199, .10);
  --wp-glow-2: rgba(15, 138, 95, .08);
  --wp-card: #ffffff;
  --wp-card-2: #f5f8fb;            /* o/tile nam trong the */
  --wp-card-line: rgba(21, 38, 51, .07);
  --wp-hair: rgba(21, 38, 51, .10);
  --wp-text: #152633;
  --wp-dim: #4f6170;
  --wp-faint: #8d96a8;

  --wp-solar: #b7770c;
  --wp-ok: #0f8a5f;
  --wp-home: #1683c7;
  --wp-grid: #64748b;
  --wp-ev: #0d8f86;
  --wp-accent: #6354b9;
  --wp-heat: #c2571e;
  --wp-act: #c53757;
  --wp-brand: #b8283f;
  --wp-on-color: #ffffff;           /* chu tren nen mau dac */

  --wp-shadow: 0 1px 2px rgba(21, 38, 51, .05), 0 10px 30px -12px rgba(21, 38, 51, .16);
  --wp-shadow-lift: 0 2px 4px rgba(21, 38, 51, .06), 0 18px 40px -14px rgba(21, 38, 51, .24);
  --wp-blur: none;
  --wp-dwg-ink: #003;               /* net ve: mau but navy cua ban goc */
  --wp-dwg-thin: #b7c2cf;
}

:root[data-theme="dark"] {
  --wp-ground: #080b11;
  --wp-glow-1: rgba(56, 189, 248, .07);
  --wp-glow-2: rgba(52, 211, 153, .05);
  --wp-card: rgba(255, 255, 255, .045);
  --wp-card-2: rgba(255, 255, 255, .05);
  --wp-card-line: rgba(255, 255, 255, .08);
  --wp-hair: rgba(255, 255, 255, .10);
  --wp-text: #eef2f7;
  --wp-dim: #8d96a8;
  --wp-faint: #5d6778;

  --wp-solar: #fbbf24;
  --wp-ok: #34d399;
  --wp-home: #38bdf8;
  --wp-grid: #94a3b8;
  --wp-ev: #2dd4bf;
  --wp-accent: #8b7bff;
  --wp-heat: #ff8c1a;
  --wp-act: #ff5d7a;
  --wp-brand: #ff5d7a;
  --wp-on-color: #06120d;

  --wp-shadow: none;
  --wp-shadow-lift: 0 18px 40px -14px rgba(0, 0, 0, .7);
  --wp-blur: blur(18px) saturate(1.2);
  --wp-dwg-ink: #e3eaf2;
  --wp-dwg-thin: #3c4757;
}

:root {
  --wp-r-card: 26px;
  --wp-r-tile: 16px;
  --wp-r-btn: 14px;
  --wp-r-field: 11px;
  --wp-pad: 16px;
  --wp-gap: 12px;
  --wp-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;
  --wp-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
                     "Helvetica Neue", Arial, sans-serif;
  --wp-mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  --wp-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* nen diu co quang sang rat nhe, khong lam rung chu */
.wp-ground {
  background:
    radial-gradient(1100px 600px at 8% -10%, var(--wp-glow-1), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, var(--wp-glow-2), transparent 60%),
    var(--wp-ground);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}