/* ============================================================
   theme-tokens.css — ระบบธีม 2 ชั้น (§1)
   ชั้น 1: 14 core token ต่อ preset  [data-theme="..."]
   ชั้น 2: derive layer (คำนวณจาก core)  html[data-theme]
   14 core: --bg1 --bg2 --surf --edge --prim --prim2 --txt --sub --glow
            --gold-hi --gold --gold-lo --gold-ink --gold-glow
   preset: maruay (default) · g1-g8 (เรืองแสง) · c1-c18 (classic)
   ============================================================ */

/* ---- :root = ค่า default (maruay-gold) เผื่อไม่มี data-theme ---- */
:root {
  --bg1:#211B3A; --bg2:#10152a; --surf:#241d44; --edge:#c08205;
  --prim:#ff7501; --prim2:#ffbd0c; --txt:#ffffff; --sub:#EBE6FF; --glow:rgba(139,58,188,.5);
  --gold-hi:#ffd700; --gold:#ffbd0c; --gold-lo:#b97b01; --gold-ink:#3a2400; --gold-glow:rgba(255,189,12,.5);
}

/* ===== PRESETS (ประกาศแค่ 14 core — derive ได้เอง) ===== */
[data-theme="maruay"]{
  --bg1:#211B3A; --bg2:#10152a; --surf:#241d44; --edge:#c08205;
  --prim:#ff7501; --prim2:#ffbd0c; --txt:#ffffff; --sub:#EBE6FF; --glow:rgba(139,58,188,.5);
  --gold-hi:#ffd700; --gold:#ffbd0c; --gold-lo:#b97b01; --gold-ink:#3a2400; --gold-glow:rgba(255,189,12,.5);
}

/* --- ชุดเรืองแสง (จาก themes ชุด1.css) --- */
[data-theme="g1"]{ --bg1:#1a0730; --bg2:#0a0416; --surf:#22093c; --edge:#3d1560; --prim:#ff4ecd; --prim2:#a821c9; --txt:#fff; --sub:#c79ae0; --glow:rgba(255,78,205,.55); --gold-hi:#8ff6ff; --gold:#22d3ee; --gold-lo:#0891b2; --gold-ink:#04222a; --gold-glow:rgba(78,224,255,.55); }
[data-theme="g2"]{ --bg1:#2a0608; --bg2:#12030a; --surf:#360a10; --edge:#5e1620; --prim:#ff3b52; --prim2:#b01023; --txt:#fff; --sub:#e6a2ab; --glow:rgba(255,59,82,.5); --gold-hi:#ffe89a; --gold:#f5c542; --gold-lo:#a9770a; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.6); }
[data-theme="g3"]{ --bg1:#03211a; --bg2:#01100c; --surf:#073327; --edge:#0f5c46; --prim:#25f5a9; --prim2:#0f9e6f; --txt:#fff; --sub:#8fe6c9; --glow:rgba(37,245,169,.5); --gold-hi:#ffe89a; --gold:#f5c542; --gold-lo:#a9770a; --gold-ink:#2a2000; --gold-glow:rgba(245,197,66,.55); }
[data-theme="g4"]{ --bg1:#170a34; --bg2:#0b0518; --surf:#1f0f45; --edge:#3a1c6e; --prim:#a06bff; --prim2:#7028d6; --txt:#fff; --sub:#c3aef0; --glow:rgba(160,107,255,.55); --gold-hi:#ff9ecb; --gold:#ff4ea3; --gold-lo:#c01e6a; --gold-ink:#3a0620; --gold-glow:rgba(255,78,163,.55); }
[data-theme="g5"]{ --bg1:#04182a; --bg2:#020c16; --surf:#062741; --edge:#0d4a72; --prim:#22c1ff; --prim2:#0e7fd6; --txt:#fff; --sub:#8fd4f5; --glow:rgba(34,193,255,.55); --gold-hi:#d6ff5c; --gold:#a3e635; --gold-lo:#5c8a10; --gold-ink:#1a2e00; --gold-glow:rgba(163,230,53,.55); }
[data-theme="g6"]{ --bg1:#2b1103; --bg2:#150802; --surf:#3a1806; --edge:#6e3110; --prim:#ff8a3c; --prim2:#e0521a; --txt:#fff; --sub:#f0c39a; --glow:rgba(255,138,60,.55); --gold-hi:#ff9ec9; --gold:#ff4e8f; --gold-lo:#c01e5c; --gold-ink:#3a0618; --gold-glow:rgba(255,78,143,.5); }
[data-theme="g7"]{ --bg1:#25060f; --bg2:#110309; --surf:#310a15; --edge:#5c1a2c; --prim:#ff4d6d; --prim2:#c01840; --txt:#fff; --sub:#f0a8b6; --glow:rgba(255,77,109,.5); --gold-hi:#ffd9c2; --gold:#e8a074; --gold-lo:#a86840; --gold-ink:#3a1810; --gold-glow:rgba(232,160,116,.55); }
[data-theme="g8"]{ --bg1:#081726; --bg2:#030b14; --surf:#0c2233; --edge:#1a4260; --prim:#5ce1ff; --prim2:#2a9fd6; --txt:#fff; --sub:#a8dcf0; --glow:rgba(92,225,255,.5); --gold-hi:#f0f4ff; --gold:#c4cfe0; --gold-lo:#8593aa; --gold-ink:#1a2230; --gold-glow:rgba(196,207,224,.5); }

/* --- ชุด classic (จาก themes-classic ชุด2.css) — เติม --glow/--gold-glow ที่ต้นฉบับไม่มี --- */
[data-theme="c1"]{ --bg1:#0d1e44; --bg2:#050d20; --surf:#13285a; --edge:#22417e; --prim:#2f6bff; --prim2:#1642c4; --txt:#eef3ff; --sub:#a8c2ee; --glow:rgba(47,107,255,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c2"]{ --bg1:#2c0810; --bg2:#160409; --surf:#3d0d16; --edge:#661a26; --prim:#e11d3a; --prim2:#a80f24; --txt:#fff0f2; --sub:#f0aab4; --glow:rgba(225,29,58,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c3"]{ --bg1:#06281c; --bg2:#02130d; --surf:#0a3a2a; --edge:#136048; --prim:#12b877; --prim2:#0a8a58; --txt:#eefaf4; --sub:#a0ddc4; --glow:rgba(18,184,119,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2a2000; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c4"]{ --bg1:#1e0a44; --bg2:#0e0522; --surf:#2a1258; --edge:#452088; --prim:#8b3ef5; --prim2:#6620c4; --txt:#f3eeff; --sub:#c6aef0; --glow:rgba(139,62,245,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2c1e00; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c5"]{ --bg1:#1a1310; --bg2:#0b0806; --surf:#241813; --edge:#402a20; --prim:#e0202e; --prim2:#a01018; --txt:#f6efe8; --sub:#d4b8a8; --glow:rgba(224,32,46,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
/* --- ชุด classic เพิ่มเติม 6-17 (สเปก D:\theme-specs\2026-08-28-color-presets-6-17.md) — ต้นฉบับใช้ --g-hi/--g/--g-lo/--g-ink ⇒ แปลงชื่อเป็น --gold-* ให้ตรงชุด classic เดิมของ repo นี้ + เติม --glow/--gold-glow ที่ต้นฉบับไม่มี (เหมือน c1-c5) --- */
[data-theme="c6"]{ --bg1:#181206; --bg2:#090703; --surf:#201808; --edge:#3d2f12; --prim:#d4a017; --prim2:#9a6b0a; --txt:#f7f0e0; --sub:#c9b98f; --glow:rgba(212,160,23,.5); --gold-hi:#ffe9a0; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2e2000; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c7"]{ --bg1:#17110f; --bg2:#0a0706; --surf:#221915; --edge:#3f2f26; --prim:#c98a5e; --prim2:#9a6038; --txt:#f6ece2; --sub:#d0b7a4; --glow:rgba(201,138,94,.5); --gold-hi:#f6e2c0; --gold:#e0c088; --gold-lo:#a8823f; --gold-ink:#2e2110; --gold-glow:rgba(224,192,136,.5); }
[data-theme="c8"]{ --bg1:#160b26; --bg2:#080410; --surf:#1f1033; --edge:#3a1f66; --prim:#9d4edd; --prim2:#6a1fb0; --txt:#f2ecff; --sub:#c4a8ee; --glow:rgba(157,78,221,.5); --gold-hi:#ffe9a0; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2c1e00; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c9"]{ --bg1:#ffffff; --bg2:#f3f4f6; --surf:#ffffff; --edge:#e6e0e1; --prim:#e11d2e; --prim2:#b0101d; --txt:#1e1a1b; --sub:#8a7f80; --glow:rgba(225,29,46,.5); --gold-hi:#e8bf5e; --gold:#cb9a1e; --gold-lo:#98720c; --gold-ink:#2a1f00; --gold-glow:rgba(203,154,30,.5); }
[data-theme="c10"]{ --bg1:#2a1505; --bg2:#160a02; --surf:#3a1e07; --edge:#663512; --prim:#ff8c1a; --prim2:#e0600f; --txt:#fff3e0; --sub:#f0c496; --glow:rgba(255,140,26,.5); --gold-hi:#ffe862; --gold:#ffc61a; --gold-lo:#c98a0a; --gold-ink:#2e1e00; --gold-glow:rgba(255,198,26,.5); }
[data-theme="c11"]{ --bg1:#f4fbfd; --bg2:#e4f2f6; --surf:#ffffff; --edge:#cde5eb; --prim:#0895b6; --prim2:#0a7490; --txt:#0d2a33; --sub:#5a8592; --glow:rgba(8,149,182,.5); --gold-hi:#d9b46a; --gold:#c19a45; --gold-lo:#8a6528; --gold-ink:#241a06; --gold-glow:rgba(193,154,69,.5); }
[data-theme="c12"]{ --bg1:#5c0a10; --bg2:#280407; --surf:#460b11; --edge:#7d1c24; --prim:#ee3a2a; --prim2:#b81c18; --txt:#fff1ea; --sub:#f0b4a6; --glow:rgba(238,58,42,.5); --gold-hi:#ffe28c; --gold:#f0c22e; --gold-lo:#a8750a; --gold-ink:#3a1c00; --gold-glow:rgba(240,194,46,.5); }
[data-theme="c13"]{ --bg1:#2a1258; --bg2:#150626; --surf:#331670; --edge:#4e2596; --prim:#9646f0; --prim2:#6a20c4; --txt:#f6efff; --sub:#cdb4f0; --glow:rgba(150,70,240,.5); --gold-hi:#ffe94d; --gold:#ffd21a; --gold-lo:#c1930a; --gold-ink:#2e2400; --gold-glow:rgba(255,210,26,.5); }
[data-theme="c14"]{ --bg1:#ffffff; --bg2:#eef3fa; --surf:#ffffff; --edge:#dbe4f0; --prim:#2181e6; --prim2:#1560b8; --txt:#12233a; --sub:#6b7d95; --glow:rgba(33,129,230,.5); --gold-hi:#e8bf5e; --gold:#cb9a1e; --gold-lo:#98720c; --gold-ink:#2a1f00; --gold-glow:rgba(203,154,30,.5); }
[data-theme="c15"]{ --bg1:#0c1533; --bg2:#05091c; --surf:#132155; --edge:#243a80; --prim:#e0202e; --prim2:#a81020; --txt:#eaf0ff; --sub:#9fb4dd; --glow:rgba(224,32,46,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c16"]{ --bg1:#0d2410; --bg2:#041206; --surf:#123018; --edge:#1f5a2e; --prim:#22b34a; --prim2:#137a30; --txt:#eefae8; --sub:#a6dcac; --glow:rgba(34,179,74,.5); --gold-hi:#f6ee56; --gold:#e6d21a; --gold-lo:#a89610; --gold-ink:#242200; --gold-glow:rgba(230,210,26,.5); }
[data-theme="c17"]{ --bg1:#111111; --bg2:#000000; --surf:#161616; --edge:#332d1c; --prim:#a8850f; --prim2:#7a600a; --txt:#f7f2e2; --sub:#c4b58a; --glow:rgba(168,133,15,.5); --gold-hi:#ffe9a0; --gold:#f5cc3a; --gold-lo:#b8860b; --gold-ink:#2e2200; --gold-glow:rgba(245,204,58,.5); }
/* --- c18 · ดำ & ทอง (แนว luxkywin) — สเปก D:\theme-specs\2026-08-29-port-chrome-glow-classic18.md
   ค่าทุกตัวดึงจาก computed style ของเว็บอ้างอิงที่ลูกค้าส่งมา (https://luxkywinv2.pro/) ไม่ใช่เดาเอง
   🔴 ธีมนี้ **สีหลักคือทอง** (--prim #fffe97 = ทองอ่อน) ต่างจาก classic ตัวอื่นที่สีหลักกับชุดทอง
      แยกกัน ⇒ ตัวอักษรที่นั่งบนสีหลักต้องเป็นสีเข้ม ดูกฎ §1d ใน theme4-overrides.css
   ⚠️ --bg1 (#141414) กับ --surf (#303030) ต้องห่างกันชัด — ครั้งแรกในสเปกตั้ง #292929/#2a2a2a
      (ต่างกัน 1 หน่วย) พื้นหน้ากับการ์ดกลืนเป็นเทาแบนก้อนเดียว เจ้าของงานทักทันที
   --glow/--gold-glow สังเคราะห์เพิ่มแบบเดียวกับ c1-c17 (prim/gold แปลงเป็น rgba .5) --- */
[data-theme="c18"]{ --bg1:#141414; --bg2:#000000; --surf:#303030; --edge:#917232; --prim:#fffe97; --prim2:#917232; --txt:#ffffff; --sub:#c9c9c9; --glow:rgba(255,254,151,.5); --gold-hi:#ffe29b; --gold:#e8da9b; --gold-lo:#b38c2c; --gold-ink:#2a1f00; --gold-glow:rgba(232,218,155,.5); }

/* --- b1 · ดำ→เทา & แดง (แนว WYNN) — ยกจาก D:/pTop/src/styles/themes/classic.css บล็อก black1
   pTop เป็น repo เดียวที่มีธีมนี้ · เจ้าของงานสั่งให้มีครบทุก repo (2026-09-05)
   ต้นทางมี --glow/--gold-glow มาให้ครบอยู่แล้ว ไม่ต้องสังเคราะห์เพิ่มแบบ c6-c18
   ⚠️ --edge ดำสนิทเท่าพื้น กับ --bg1 = --bg2 ดำเรียบ เป็นค่าของต้นฉบับ ไม่ใช่ค่าที่ลืมใส่
      WYNN แยกชั้นด้วยความสว่างของการ์ด (--surf #171717) ไม่ใช่ด้วยเส้นขอบ --- */
[data-theme="b1"]{ --bg1:#000000; --bg2:#000000; --surf:#171717; --edge:#000000; --prim:#c70011; --prim2:#ac000e; --txt:#ffffff; --sub:#b3b3b3; --glow:rgba(255,46,64,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2a1500; --gold-glow:rgba(245,197,66,.5); }

/* ===== DERIVE LAYER — คำนวณจาก 14 core (specificity ชนะ :root) ===== */
html[data-theme]{
  /* map เข้าตัวแปรที่ style.css ใช้อยู่แล้ว → ธีมไหลเข้าทันที */
  --main-color: var(--prim);
  --secondary-color: var(--sub);
  --Linear: linear-gradient(180deg, var(--prim) 0%, var(--prim2) 100%);

  /* ── หมวด CHROME · สีของ "โครงหน้า" (หัวเว็บ · แถบล่าง · แถบชวนติดตั้ง · ลิ้นชัก) 2026-08-29 ──
     🔴 นี่คือ "การจัดหมวดสีผิด" ไม่ใช่ token ไม่พอ (เจ้าของงานชี้เอง) — โครงหน้าต้องเป็น
        ครอบครัวสีเดียวกันเสมอ ไม่ใช่ครอบครัวเดียวกับการ์ด/เนื้อหา
        ของเดิม: หัวเว็บ/แถบล่าง/แถบติดตั้ง = `--Linear` (prim→prim2) แต่ **ลิ้นชัก = `--gold`**
        ในธีม maruay มันบังเอิญเข้ากันเพราะ `--gold` กับ `--prim2` ตั้งค่าเท่ากันเป๊ะ (#ffbd0c)
        พอเปลี่ยนจานสี สองตัวนี้แยกจากกัน ลิ้นชักเลยหลุดไปคนละครอบครัวกับหัวเว็บ
     ⚠️ **ห้ามผูกกับ `--Linear` ตรง ๆ** — `--Linear` ถูกใช้กับปุ่ม/แท็บ/การ์ดอีกหลายจุด
        (`.grad_color02` `.btn-danger2` `.btn-danger3` `.tabAff`) ⇒ ต้องแยก token ให้ธีมไหน
        override โครงหน้าได้ (เช่น c18 ที่ต้องการหัวเว็บดำล้วน) โดยไม่ลากปุ่มทั้งเว็บไปด้วย
     ⚠️ ค่าตั้งต้นชี้กลับของเดิมเป๊ะ: grad = `--Linear` · bg = `--prim2` (= `--gold` ใน maruay)
        ⇒ ธีมเริ่มต้น (maruay = ของที่โคลนมา) ไม่ขยับสักพิกเซล */
  --chrome-gradient-from: var(--prim);
  --chrome-gradient-to: var(--prim2);
  --chrome-bg: var(--chrome-gradient-to);
  --chrome-grad: linear-gradient(180deg, var(--chrome-gradient-from) 0%, var(--chrome-gradient-to) 100%);

  /* derive เสริม */
  --gold-grad: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
  --page-grad: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  --surf-2: color-mix(in srgb, var(--surf) 82%, #000);
  --edge-soft: color-mix(in srgb, var(--edge) 55%, transparent);
  --prim-soft: color-mix(in srgb, var(--prim) 18%, transparent);
  --prim-hover: color-mix(in srgb, var(--prim) 85%, #000);

  /* ── ปุ่มสมัครสมาชิก / เข้าสู่ระบบ (2026-08-29) ──
     ไฟล์ธีมต้นฉบับกำหนดไว้ว่า
       .btn.reg   { background: linear-gradient(180deg, g-hi, g, g-lo); color: g-ink; }
       .btn.login { background: linear-gradient(180deg, prim, prim2); }
     **ของเราสลับกันอยู่ และหนักกว่านั้น**: `.btn-login` ได้ทอง (`--gold-hi`) ส่วนปุ่มสมัคร
     ซึ่งเป็น CTA เด่นสุดกลับเป็น `--danger` = สีสถานะคงที่ ไม่ใช่สีของธีมเลยสักนิด
     ⇒ เปลี่ยนจานสี 27 ครั้ง ปุ่มสมัครก็ยังแดงเท่าเดิมทุกครั้ง
     ⚠️ เฉดกลาง (`--gold`) สำคัญ: ไล่ 2 เฉด = ทองแบน · ไล่ 3 เฉด = ดูเป็นโลหะ
        `--gold-grad` ที่มีอยู่แล้วเป็น 3 เฉดพอดี จึงใช้ตัวเดิมไม่ประดิษฐ์ใหม่
     ⚠️ ไม่ต้องมีชั้น normalize `--_gold-*` แบบสเปก — repo นี้ใช้ `--gold-*` ชื่อเดียวทุกตระกูล
        (ไม่มี `--g-*` เลย) ตั้งแต่ตอนแปลงสเปก 6-17 เข้ามาแล้ว */
  --btn-reg-bg: var(--gold-grad);
  --btn-reg-ink: var(--gold-ink);
  --btn-reg-edge: var(--gold-lo);
  --btn-login-bg: var(--Linear);
  --btn-login-ink: var(--txt);
  --btn-login-edge: var(--prim2);
  /* B3 · เงาเรืองสีธีมใต้ปุ่มคู่นี้ (ต้นฉบับใส่ `box-shadow: 0 2px 10px -3px var(--g)`) */
  --btn-auth-glow: 0 2px 12px -4px var(--glow);
  /* C2 · hover ของปุ่มคู่นี้ (ต้นฉบับใส่ `filter: brightness(1.1)`)
     ⚠️ ทำเป็น token ไม่ใช่กฎ `:not([data-theme="maruay"]) .btn-signup:hover` เพราะกฎแบบนั้น
        specificity (0,4,1) จะทับกฎเฉพาะธีมของ c18 ที่ต้องการ brightness แรงกว่า (ปุ่มไส้ดำ
        ขอบทองมันเข้มกว่าปุ่มไส้ทึบมาก) · เป็น token แล้วธีมไหนอยากได้ค่าอื่นก็ตั้งในชั้น 3 ได้เลย
     ⚠️ ประกาศเป็น `filter` ตัวเดียว ไม่แตะ box-shadow ⇒ เงาขาวตอน hover ที่ style.css:1815
        ตั้งไว้ยังอยู่ครบทุกธีม (รวม maruay) */
  --btn-auth-hover-filter: brightness(1.1);

  /* สถานะ + เสริม (default คงที่ทุกธีม — แก้ทับได้ในหน้า studio) */
  --success: #16b877; --success-2: #0a8a58;
  --danger: #dc2626; --danger-2: #a01018;
  --warning: #f2bc3f; --info: #2479dc;
  --accent: #6024dc; --ink: #0a0a12; --muted: #7c7c8f;
}

/* ═══════════ ชั้น 3 · override เฉพาะธีม — เขียนท้ายไฟล์เสมอ ═══════════
   🔴 `html[data-theme="X"]` กับ `html[data-theme]` specificity **เท่ากันเป๊ะ (0,1,1)**
      ⇒ ตัวที่อยู่ล่างกว่าในไฟล์ชนะ · เขียน override ไว้ในบล็อกพรีเซตชั้น 1 (ซึ่งอยู่บนกว่า
      ชั้น 2 และ specificity ต่ำกว่าด้วย) = **ไม่ติด** ต้องเขียนตรงนี้เท่านั้น

   🔴 selector ที่นี่ต้องเว้นวรรคก่อน `{` เสมอ (`…"] {` ไม่ใช่ `…"]{`)
      tests/theme-presets.test.mjs จับ "บล็อกพรีเซต" ด้วย regex ที่ต้องการ `]` ติด `{`
      + ต้องขึ้นต้นบรรทัด — เขียนติดกันจะโดนนับเป็นพรีเซตแล้วเทสต์ฟ้องว่า core token ไม่ครบ */

/* ── maruay = **ธีมเริ่มต้นของเว็บนี้** (ของที่โคลนมาจากลูกค้า) ──
   🔴 ที่นี่ไม่เหมือน theme2: `<html>` **มี `data-theme` เสมอ** (layout.tsx ตั้ง
      `themeDataAttr(ssrTheme) ?? "maruay"`) ⇒ ไม่มีสภาพ "ไม่มี data-theme" ให้พึ่ง
      การเขียน override ใต้ `html[data-theme]` จึง **โดนธีม default เต็ม ๆ**
   ⇒ กติกาของ repo นี้: ชั้น 2 ถือ "การจัดหมวดที่ถูกต้อง" แล้ว pin maruay กลับค่าเดิมตรงนี้
      (ค่าล่างนี้ = ค่าที่ style.css:1803/1819 เขียนไว้เป๊ะ ก๊อปมาตรง ๆ ไม่ได้ปัดใหม่) */
html[data-theme="maruay"] {
  --btn-reg-bg: var(--danger);
  --btn-reg-ink: var(--txt);
  --btn-reg-edge: var(--danger);
  --btn-login-bg: linear-gradient(90deg, var(--gold-hi), var(--gold-hi));
  --btn-login-ink: var(--ink);
  --btn-login-edge: var(--ink);
  --btn-auth-glow: none;
  --btn-auth-hover-filter: none;
}

/* ── c18 · ดำ & ทอง (แนว luxkywin) ──────────────────────────────────────────
   🔴 หัวเว็บ/แถบล่าง/ลิ้นชักต้องเป็น **ดำ** ไม่ใช่ทอง — ชั้น 2 ตั้ง --chrome-gradient-* ให้
      ตามสีหลัก (prim → prim2) และธีมนี้สีหลัก = ทอง ⇒ ไม่ override จะได้โครงหน้าทองทั้งแถบ
      แรงกว่าเว็บอ้างอิงมาก (ต้นฉบับแถบบนเป็นดำล้วน ทองโผล่เฉพาะขอบปุ่ม/เมนูที่เลือก/หัวข้อ)
      --chrome-bg ในชั้น 2 = var(--chrome-gradient-to) ⇒ ลิ้นชักได้ #000000 ตามไปเอง
   🔴 บล็อกนี้ต้องอยู่ **ใต้** ชั้น 2 เท่านั้น — specificity เท่ากันเป๊ะ (0,1,1) ตัวล่างชนะ
      (เทสต์ข้อ 6 ใน tests/theme-presets.test.mjs เฝ้าลำดับนี้ไว้ให้)
   ⚠️ ปุ่มสมัคร/ล็อกอินของธีมนี้เป็น "ไส้ดำ ขอบไล่ทอง" ที่เข้มกว่าปุ่มไส้ทึบของธีมอื่นมาก
      brightness 1.1 แทบไม่เห็นความต่างตอน hover ⇒ ดันเป็น 1.25 (ค่าจากสเปก) */
html[data-theme="c18"] {
  --chrome-gradient-from: #292929;
  --chrome-gradient-to: #000000;
  --btn-auth-hover-filter: brightness(1.25);
}

/* ── b1 · ดำ→เทา & แดง (แนว WYNN) ─────────────────────────────────────────
   🔴 เหตุผลเดียวกับ c18 แต่คนละสี: ชั้น 2 ตั้ง --chrome-gradient-* ตามสีหลัก
      (prim → prim2) และธีมนี้สีหลัก = **แดง** ⇒ ไม่ override จะได้หัวเว็บ/แถบล่าง/
      ลิ้นชักเป็นแถบแดงเต็มความกว้าง ซึ่งไม่ใช่ต้นฉบับ (WYNN โครงหน้าเป็นเทาดำ
      แดงโผล่เฉพาะ accent/ปุ่มที่เลือก)
      ค่าเทา 2 ตัวนี้คือ --surf-3/--surf-hi ของ pTop ตรง ๆ (ที่นั่นใช้คุม nav/หัวเว็บ)
      --chrome-bg ในชั้น 2 = var(--chrome-gradient-to) ⇒ ลิ้นชักได้ #141414 ตามไปเอง
   🔴 บล็อกนี้ต้องอยู่ **ใต้** ชั้น 2 เท่านั้น (specificity เท่ากันเป๊ะ ตัวล่างชนะ)
      เทสต์ข้อ 7 ใน tests/theme-presets.test.mjs เฝ้าลำดับนี้ไว้ให้
   🔻 ต่างจาก pTop โดยตั้งใจ: ที่นั่นปุ่มสมัคร/CTA เป็นเขียวผ่าน token ตระกูล --cta-*
      ซึ่ง repo นี้ไม่มี — ปุ่มสมัครที่นี่ผูกกับ --gold-grad (ชุดทอง 3 เฉด) ⇒ ดันให้เขียว
      ต้องทับชุดทองทั้งชุด แล้วของทองอื่นทั้งเว็บจะเขียวตามไปหมด จึงคงเป็นทองไว้ */
html[data-theme="b1"] {
  --chrome-gradient-from: #0a0a0a;
  --chrome-gradient-to: #141414;
}