/* ============================================================
   Peter Lu — ธีมกลาง (ใช้ร่วมกัน: หน้า Home "/" และร้านค้า "/shop/")
   - Dark เป็นค่าเริ่มต้น  ·  Light = <html data-theme="light">
   - สลับธีมและจำค่าด้วย /theme.js (localStorage คีย์ "pl-theme" ใช้ร่วมทั้งสองหน้า)
   - ที่มาของสี: Light ใช้พื้น/หมึกเดิมของ Home + น้ำเงินแบรนด์ Hokma (โทเคนเดิมของ Shop)
                 Dark ใช้พาเลตเดิมของ Shop ทั้งชุด
   - ห้ามฮาร์ดโค้ดสีในหน้า ให้อ้างตัวแปร --c-* เท่านั้น
   ============================================================ */
:root{
  /* น้ำเงินแบรนด์ Hokma (ไม่เปลี่ยนตามธีม) */
  --hk-blue-50:#EAF1FF; --hk-blue-100:#D2E2FF; --hk-blue-200:#8FB9FF; --hk-blue-300:#5C9CFF; --hk-blue-400:#3D86FF;
  --hk-blue-500:#0A65FF; --hk-blue-600:#0052D6; --hk-blue-700:#0135D8; --hk-navy-800:#093F81; --hk-navy-900:#062B58;
  --c-text-on-brand:#FFFFFF; --c-line-green:#06C755; --c-line-green-hover:#05A948;

  /* ---------- DARK (default) ---------- */
  color-scheme:dark;
  --c-bg:#0E1218; --c-bg-grid:#1A212B; --c-surface:#161C25; --c-surface-2:#1D2530; --c-surface-brand:#10233F;
  --c-line:#2A333F; --c-line-strong:#3D4857; --c-line-2:#3D4857;
  --c-text:#F2F5F9; --c-text-muted:#A8B0BD; --c-text-subtle:#8790A0;
  --c-primary:var(--hk-blue-500); --c-primary-hover:var(--hk-blue-400); --c-primary-soft:#10233F;
  --c-primary-text:var(--hk-blue-300);            /* น้ำเงินสำหรับ "ตัวอักษร" บนพื้นธีมนี้ (contrast พอ) */
  --c-brand-ink:var(--hk-blue-200); --c-accent-deep:var(--hk-blue-300); --c-focus:var(--hk-blue-300);
  --c-dot:var(--hk-blue-400);
  --c-cover-a:#1B4FB8; --c-cover-b:#0B1F3F;
  --c-sale-fg:#F09BA1; --c-sale-bg:#2C1619; --c-warn-fg:#F2C179; --c-warn-bg:#2E2415;
  --c-new-fg:var(--hk-blue-200); --c-new-bg:#10233F; --c-limit-fg:#C9B3FF; --c-limit-bg:#221A3A;
  --c-scrim:rgba(0,0,0,.6);
  --c-danger:#FF6B78; --c-danger-fg:#F09BA1; --c-danger-bg:#2C1619; --c-danger-line:#55272C;
  --c-success:#3DDC8A; --c-success-bg:#12291F; --c-success-fg:#3DDC8A;
  --c-qr-bg:#FFFFFF; --c-qr-head:var(--hk-navy-900);
  --c-hokma-fg:#FFFFFF; --c-hokma-bg:var(--hk-blue-500);
  /* พื้นเข้ม/ปุ่มเข้ม/การ์ดไฮไลต์ (ใช้บน Home) */
  --c-strong-bg:#2A3647; --c-strong-fg:#F2F5F9; --c-strong-hover:#34445A;
  --c-spot-bg:#10233F; --c-spot-fg:#FFFFFF; --c-spot-tag:#8FB9FF; --c-spot-list:#C5D0E2;
  --c-page-glow:#16233B;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); --sh-2:0 4px 12px rgba(0,0,0,.45); --sh-3:0 12px 32px rgba(0,0,0,.55);
  --sh-cta:0 6px 18px rgba(10,101,255,.34);
  --sh-ink:rgba(0,0,0,.45);                         /* เงาใต้รูปสินค้า/ภาพตัดขอบ */
}

:root[data-theme="light"]{
  color-scheme:light;
  --c-bg:#F4F6FA; --c-bg-grid:#E4E9F1; --c-surface:#FFFFFF; --c-surface-2:#EEF1F6; --c-surface-brand:var(--hk-blue-50);
  --c-line:#DEE3EB; --c-line-strong:#98A1B0; --c-line-2:#CBD2DE;
  --c-text:#0B1220; --c-text-muted:#4B5563; --c-text-subtle:#667085;
  --c-primary:var(--hk-blue-500); --c-primary-hover:var(--hk-blue-600); --c-primary-soft:var(--hk-blue-50);
  --c-primary-text:var(--hk-blue-600);
  --c-brand-ink:var(--hk-blue-700); --c-accent-deep:var(--hk-navy-800); --c-focus:var(--hk-blue-500);
  --c-dot:var(--hk-blue-500);
  --c-cover-a:var(--hk-blue-500); --c-cover-b:var(--hk-navy-800);
  --c-sale-fg:#A61E27; --c-sale-bg:#FDE7E8; --c-warn-fg:#96550A; --c-warn-bg:#FFF3DF;
  --c-new-fg:var(--hk-blue-700); --c-new-bg:var(--hk-blue-50); --c-limit-fg:#5B2BB5; --c-limit-bg:#F0E9FF;
  --c-scrim:rgba(6,43,88,.42);
  --c-danger:#D42B3B; --c-danger-fg:#A61E27; --c-danger-bg:#FDEBEC; --c-danger-line:#E8A5AC;
  --c-success:#0A7A46; --c-success-bg:#E7F6EE; --c-success-fg:#0A7A46;
  --c-hokma-bg:var(--hk-blue-600);
  --c-strong-bg:#0B1220; --c-strong-fg:#FFFFFF; --c-strong-hover:#1C2537;
  --c-spot-bg:#0B1220; --c-spot-fg:#FFFFFF; --c-spot-tag:#93B4FF; --c-spot-list:#D6DCE8;
  --c-page-glow:#E3EAFB;
  --sh-1:0 1px 2px rgba(9,63,129,.06),0 1px 3px rgba(9,63,129,.10);
  --sh-2:0 4px 12px rgba(9,63,129,.09);
  --sh-3:0 12px 32px rgba(9,63,129,.13);
  --sh-ink:rgba(6,43,88,.22);
}

/* ---------- ปุ่มสลับธีม (ใช้เหมือนกันทั้งสองหน้า) ---------- */
.theme-toggle{
  flex:none; width:44px; height:44px; padding:0; display:inline-grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--c-line); background:var(--c-surface); color:var(--c-text-muted);
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.theme-toggle:hover{color:var(--c-text); border-color:var(--c-line-strong)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:20px; height:20px; display:block}
/* โชว์ไอคอน "ดวงอาทิตย์" ตอนอยู่ Dark (กดเพื่อไปสว่าง) และ "พระจันทร์" ตอนอยู่ Light */
.theme-toggle .i-sun{display:block}  .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}

/* ============================================================
   ชุดตกแต่งกลาง: ตารางกริด + จุด halftone (ใช้ร่วมทุกหน้า)
   - .grid-bg      พื้นตารางกริด 56px (เส้น = --c-bg-grid)
   - .halftone     จุดสีน้ำเงินจางออกที่มุม  (.tr .tl .mr .bl)  — ใส่ใน element ที่ position:relative + overflow:hidden
   - .pl-deco      ชั้นพื้นหลังเต็มจอ (fixed) สำหรับหน้าที่ไม่มีแบนเนอร์ เช่น Home / Quiz
   ============================================================ */
.grid-bg{
  background-color:var(--c-bg);
  background-image:linear-gradient(var(--c-bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-bg-grid) 1px,transparent 1px);
  background-size:56px 56px; background-position:-1px -1px;
}
.halftone{
  position:absolute; pointer-events:none; width:260px; height:260px; opacity:var(--c-dot-o,1);
  background-image:radial-gradient(var(--c-dot) 34%,transparent 36%); background-size:11px 11px;
}
.halftone.tr{top:-30px;right:-30px;-webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 70%)}
.halftone.tl{left:-40px;width:200px;height:200px;-webkit-mask-image:radial-gradient(circle at 0 0,#000 0,transparent 68%);mask-image:radial-gradient(circle at 0 0,#000 0,transparent 68%)}
.halftone.mr{right:-30px;width:200px;height:200px;-webkit-mask-image:radial-gradient(circle at 100% 50%,#000 0,transparent 68%);mask-image:radial-gradient(circle at 100% 50%,#000 0,transparent 68%)}
.halftone.bl{bottom:-40px;left:-40px;width:200px;height:200px;-webkit-mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 68%);mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 68%)}
.pl-deco{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background-image:linear-gradient(var(--c-bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-bg-grid) 1px,transparent 1px);
  background-size:56px 56px; background-position:-1px -1px}
.pl-deco .halftone.tr{width:300px;height:300px}
.pl-deco .halftone.bl{width:240px;height:240px}

/* ---------- โทเคนเสริมสำหรับหน้าที่เขียนสีไว้ในตัว (/hokma /renew /quiz) ---------- */
:root{
  --c-text-body:#C5CCD8; --c-brand-line:#24467F; --c-dot-o:.62;
  --p-accent:#1D4ED8; --p-accent-hover:#3B6FF0; --p-accent-text:#7FAEFF;   /* ปุ่ม/พื้นน้ำเงิน (ตัวหนังสือขาวบนนี้) · ตัวอักษรน้ำเงินบนพื้นธีม */
}
:root[data-theme="light"]{
  --c-text-body:#374151; --c-brand-line:#C7D5FA; --c-dot-o:1;
  --p-accent:#1D4ED8; --p-accent-hover:#1E3A8A; --p-accent-text:#1D4ED8;
}
html{background:var(--c-bg)}