/* =====================================================================
   ChakraTune Design System v1  —  design tokens + core components
   สร้าง 2026-08-08 (ควินน์) — ใช้ร่วมกันได้ทั้ง landing / app / admin
   ยังไม่ถูก import ที่ไหน (safe). ปูทับตามเฟส B.
   ฟอนต์: self-host WOFF2 (OFL) — Kanit(display) + Prompt(body) — ขึ้นทุกอุปกรณ์
   ===================================================================== */
@font-face{font-family:'Kanit';font-weight:500;font-display:swap;
  src:url('/assets/fonts/Kanit-Medium.woff2') format('woff2'),url('/assets/fonts/Kanit-Medium.ttf') format('truetype')}
@font-face{font-family:'Kanit';font-weight:600;font-display:swap;
  src:url('/assets/fonts/Kanit-SemiBold.woff2') format('woff2'),url('/assets/fonts/Kanit-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Kanit';font-weight:700;font-display:swap;
  src:url('/assets/fonts/Kanit-Bold.woff2') format('woff2'),url('/assets/fonts/Kanit-Bold.ttf') format('truetype')}
@font-face{font-family:'Kanit';font-weight:800;font-display:swap;
  src:url('/assets/fonts/Kanit-ExtraBold.woff2') format('woff2'),url('/assets/fonts/Kanit-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Prompt';font-weight:400;font-display:swap;
  src:url('/assets/fonts/Prompt-Regular.woff2') format('woff2'),url('/assets/fonts/Prompt-Regular.ttf') format('truetype')}
@font-face{font-family:'Prompt';font-weight:500;font-display:swap;
  src:url('/assets/fonts/Prompt-Medium.woff2') format('woff2'),url('/assets/fonts/Prompt-Medium.ttf') format('truetype')}
@font-face{font-family:'Prompt';font-weight:600;font-display:swap;
  src:url('/assets/fonts/Prompt-SemiBold.woff2') format('woff2'),url('/assets/fonts/Prompt-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Prompt';font-weight:700;font-display:swap;
  src:url('/assets/fonts/Prompt-Bold.woff2') format('woff2'),url('/assets/fonts/Prompt-Bold.ttf') format('truetype')}
/* --- A: Inter(อังกฤษ ~ San Francisco) + Noto Sans Thai(ไทย) — variable ครอบทุกน้ำหนัก --- */
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/Inter.woff2') format('woff2'),url('/assets/fonts/Inter.ttf') format('truetype')}
@font-face{font-family:'Noto Sans Thai';font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/NotoSansThai.woff2') format('woff2'),url('/assets/fonts/NotoSansThai.ttf') format('truetype')}
:root{
  /* --- base surfaces (dark) --- */
  --ct-bg:#0a0812; --ct-bg-2:#0d0a1a; --ct-surface:rgba(255,255,255,.04);
  --ct-surface-2:rgba(255,255,255,.06); --ct-line:rgba(255,255,255,.08);

  /* --- text --- */
  --ct-ink:#ffffff; --ct-muted:#b8afd0; --ct-faint:#7a7196;

  /* --- premium gold accent (หัวใจของธีมใหม่) --- */
  --ct-gold:#e9c46a; --ct-gold-2:#c99a3b;
  --ct-gold-grad:linear-gradient(135deg,#f0d488,#c99a3b);

  /* --- brand gradient (โลโก้/แบรนด์เดิม — ม่วง→ชมพู) --- */
  --ct-brand:#a855f7; --ct-brand-2:#ec4899;
  --ct-brand-grad:linear-gradient(135deg,#a855f7,#ec4899);

  /* --- 7 chakra spectrum --- */
  --ck-root:#ef4444; --ck-sacral:#f97316; --ck-solar:#eab308; --ck-heart:#22c55e;
  --ck-throat:#3b82f6; --ck-eye:#6366f1; --ck-crown:#a855f7;

  /* --- radii / shadow / glow --- */
  --ct-r-sm:10px; --ct-r:16px; --ct-r-lg:22px; --ct-r-pill:999px;
  --ct-shadow:0 14px 40px -18px rgba(0,0,0,.6);
  --ct-glow-gold:0 0 16px rgba(233,196,106,.5);
  --ct-glow-brand:0 0 16px rgba(168,85,247,.45);

  /* --- type --- */
  --ct-display:'Inter','Noto Sans Thai',sans-serif;      /* หัวเรื่อง — ระบบสะอาด (~SF) */
  --ct-body:'Inter','Noto Sans Thai',sans-serif;         /* เนื้อความ */
}

/* ---------- typography ---------- */
.ct-display{font-family:var(--ct-display);font-weight:800;line-height:1.1}
.ct-body{font-family:var(--ct-body)}
.ct-kicker{color:var(--ct-gold);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700}

/* ---------- logo ---------- */
.ct-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:18px}
.ct-logo img{width:28px;height:28px;border-radius:9px;box-shadow:var(--ct-glow-brand)}
.ct-logo .wm{background:var(--ct-brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- buttons ---------- */
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--ct-r-pill);font-weight:800;font-size:15px;
  border:1px solid transparent;cursor:pointer;font-family:var(--ct-body)}
.ct-btn--gold{background:var(--ct-gold-grad);color:#241a08;box-shadow:0 10px 30px -8px rgba(201,154,59,.5)}
.ct-btn--brand{background:var(--ct-brand-grad);color:#fff}
.ct-btn--ghost{background:var(--ct-surface-2);color:var(--ct-ink);border-color:var(--ct-line)}

/* ---------- cards ---------- */
.ct-card{background:var(--ct-surface);border:1px solid var(--ct-line);border-radius:var(--ct-r);padding:16px}
.ct-card--img{position:relative;overflow:hidden;aspect-ratio:1/1;padding:0;border-radius:var(--ct-r)}
.ct-card--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-card--img .ov{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(10,8,18,.02) 32%,rgba(10,8,18,.5) 62%,rgba(10,8,18,.93))}

/* ---------- pills / badges ---------- */
.ct-pill{font-size:11px;font-weight:800;padding:4px 12px;border-radius:var(--ct-r-pill)}
.ct-pill--gold{background:var(--ct-gold-grad);color:#241a08}
.ct-pill--members{background:#fbbf24;color:#111;font-weight:900}

/* ---------- line-icon system ---------- */
.ct-icon{display:inline-flex;color:var(--ct-gold)}
.ct-icon svg{width:18px;height:18px;stroke-width:1.7;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- chakra helpers ---------- */
.ck-orb{width:36px;height:36px;border-radius:50%;box-shadow:0 0 16px -2px currentColor}