/* Lucian UX/UI Prompt theme tokens · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/
   Các biến --ux-* gốc của Lucian đã được map sang bảng màu thương hiệu Hoàng Minh Bcons (vàng BCONS gradient sáng).
   Đổi màu toàn site: chỉ cần sửa các biến --brand-* bên dưới. */
:root{
  color-scheme:light;
  /* Thương hiệu */
  --brand-gold-1:#E8A900;
  --brand-gold-2:#F7C21B;
  --brand-gold-3:#FFE07A;
  --brand-navy:#1C2333;
  --brand-cream:#FFFBF0;
  --brand-grad:linear-gradient(120deg,var(--brand-gold-1),var(--brand-gold-2) 50%,var(--brand-gold-3));

  /* Lucian tokens (light) */
  --ux-page:#FFFBF0;
  --ux-surface:#FFFFFF;
  --ux-surface-2:#FBF5E6;
  --ux-surface-3:#F1E8D2;
  --ux-ink:#1C2333;
  --ux-ink-2:#4A5163;
  --ux-ink-3:#7C8191;
  --ux-line:rgba(28,35,51,.09);
  --ux-line-2:rgba(28,35,51,.18);
  --ux-accent:#C98F00;            /* vàng đậm cho chữ/viền trên nền sáng (đạt tương phản) */
  --ux-accent-2:#E8A900;
  --ux-accent-soft:rgba(232,169,0,.14);
  --ux-accent-ink:#1C2333;        /* chữ trên nền vàng luôn là xanh than */
  --ux-mint:#1E9E6E;
  --ux-warn:#D6731E;
  --ux-danger:#D93A55;
  --ux-glass:rgba(255,255,255,.62);
  --ux-glass-line:rgba(255,255,255,.85);
  --ux-shadow:rgba(60,45,10,.14);
  --ux-shadow-strong:rgba(60,45,10,.28);
  --ux-grad:var(--brand-grad);
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ux-page:#12161F;
  --ux-surface:#1C2333;
  --ux-surface-2:#232B3E;
  --ux-surface-3:#2E3850;
  --ux-ink:#F5F1E6;
  --ux-ink-2:rgba(245,241,230,.72);
  --ux-ink-3:rgba(245,241,230,.48);
  --ux-line:rgba(255,255,255,.08);
  --ux-line-2:rgba(255,255,255,.16);
  --ux-accent:#F7C21B;
  --ux-accent-2:#FFE07A;
  --ux-accent-soft:rgba(247,194,27,.14);
  --ux-accent-ink:#1C2333;
  --ux-mint:#7EE8C0;
  --ux-warn:#FFB26B;
  --ux-danger:#FF7D8C;
  --ux-glass:rgba(255,255,255,.07);
  --ux-glass-line:rgba(255,255,255,.18);
  --ux-shadow:rgba(0,0,0,.45);
  --ux-shadow-strong:rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ux-page:#12161F;--ux-surface:#1C2333;--ux-surface-2:#232B3E;--ux-surface-3:#2E3850;
    --ux-ink:#F5F1E6;--ux-ink-2:rgba(245,241,230,.72);--ux-ink-3:rgba(245,241,230,.48);
    --ux-line:rgba(255,255,255,.08);--ux-line-2:rgba(255,255,255,.16);
    --ux-accent:#F7C21B;--ux-accent-2:#FFE07A;--ux-accent-soft:rgba(247,194,27,.14);--ux-accent-ink:#1C2333;
    --ux-mint:#7EE8C0;--ux-warn:#FFB26B;--ux-danger:#FF7D8C;
    --ux-glass:rgba(255,255,255,.07);--ux-glass-line:rgba(255,255,255,.18);
    --ux-shadow:rgba(0,0,0,.45);--ux-shadow-strong:rgba(0,0,0,.7);
  }
}
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}
.ux{font-family:inherit}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}