/* ── Design tokens ───────────────────────────────────────────────
   พาเลตต์ ดำ + ขาว + ส้ม + ทอง
     ดำ / ขาว  พื้นผิวและตัวอักษร
     ส้ม       ปุ่มสั่งซื้อและการกระทำหลักเท่านั้น (สั่งซื้อ ใส่ตะกร้า ยืนยัน)
     ทอง       ความหรูหรา: ลิงก์ เส้นคั่น เมนู/ตัวเลือกที่เลือกอยู่ ราคา ป้ายพิเศษ
   ธีมมืดเป็นค่าเริ่มต้น (ให้การ์ดเด่น) + ธีมสว่างผ่าน [data-theme]  */

:root {
  /* พื้นผิว — ดำสนิทไล่ระดับ อมอุ่นเล็กน้อยให้เข้ากับทอง */
  --bg: #0a0a0a;
  --bg-elevated: #141312;
  --bg-sunken: #050505;
  --bg-hover: #1d1b18;
  --border: #2a2723;
  --border-strong: #3f3a33;

  /* ตัวอักษร — ขาวงาช้าง */
  --text: #f6f3ec;
  --text-muted: #b5aea2;
  --text-faint: #7d776d;

  /* ส้ม — การกระทำหลัก */
  --accent: #ff6b1a;
  --accent-hover: #ff8540;
  --accent-soft: rgba(255, 107, 26, 0.14);
  --accent-grad: linear-gradient(135deg, #ff8a3d 0%, #ff6b1a 52%, #e8520c 100%);
  --accent-glow: 0 10px 28px -10px rgba(255, 107, 26, 0.7);
  --on-accent: #140800;

  /* ทอง — ความหรูหรา */
  --gold: #d4af37;
  --gold-hover: #ebca6b;
  --gold-soft: rgba(212, 175, 55, 0.12);
  --gold-line: rgba(212, 175, 55, 0.36);
  --gold-grad: linear-gradient(135deg, #f8e8b4 0%, #d4af37 45%, #a07a1c 100%);
  --gold-foil: linear-gradient(180deg, #fbeec2 0%, #e2c25a 48%, #c69a2c 100%);
  --on-gold: #1a1204;

  /* ลิงก์และสถานะรองใช้ทอง (เดิมเป็นน้ำเงินซึ่งไม่อยู่ในพาเลตต์) */
  --secondary: var(--gold);
  --secondary-hover: var(--gold-hover);
  --secondary-soft: var(--gold-soft);

  /* สีสื่อความหมาย — เขียว/แดงคงไว้เฉพาะสถานะ (สำเร็จ ผิดพลาด ราคาขึ้นลง) */
  --success: #3fbf7f;
  --success-soft: rgba(63, 191, 127, 0.13);
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --warning: #f0b429;
  --warning-soft: rgba(240, 180, 41, 0.13);

  /* รูปทรง — มุมโค้งน้อยลงให้ดูคมและเรียบหรู */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* เงา */
  --shadow-card: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-pop: 0 22px 56px rgba(0, 0, 0, 0.62);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-gold: 0 0 0 1px var(--gold-line), 0 18px 44px -20px rgba(212, 175, 55, 0.45);

  /* ระยะห่าง — สเกล 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ตัวอักษร — หัวข้อเป็น serif (Playfair Display + Noto Serif Thai) ให้ดูหรู
     เนื้อหายังเป็น Noto Sans Thai เพราะอ่านง่ายที่สุดในขนาดเล็ก
     (Bebas Neue ยังโหลดไว้สำหรับตัวหนังสือบนภาพกล่องสินค้าใน productArt.js) */
  --font-display: 'Playfair Display', 'Noto Serif Thai', Georgia, serif;
  --font-body: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3.25rem;

  --lh-body: 1.65;
  --lh-heading: 1.25;

  /* เลย์เอาต์ */
  --container: 1440px;
  --header-h: 72px;
  --sidebar-w: 264px;
  --card-ratio: 63 / 88;

  /* จังหวะ */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
  --t-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ชั้นซ้อน */
  --z-header: 50;
  --z-sheet: 80;
  --z-modal: 100;
  --z-toast: 120;

  /* สี rarity — ใช้ร่วมกับ [data-rarity]
     ไล่ตามระดับความหายากของ Kayou: เทา → น้ำเงิน → ม่วง → ชมพู → แดง → ส้ม → ทอง → รุ้ง (SE)
     รหัสพาราเรล (◇) สะกดเป็น -parallel ในชื่อตัวแปร */
  --rarity-R: #9ca3af;
  --rarity-SR: #3b82f6;
  --rarity-SSR: #a855f7;
  --rarity-UR: #d946ef;
  --rarity-UR-parallel: #ec4899;
  --rarity-HR: #f43f5e;
  --rarity-PU: #dc2626;
  --rarity-MR: #ea580c;
  --rarity-BP: #f97316;
  --rarity-AR: #f59e0b;
  --rarity-ASP: #eab308;
  --rarity-ASP-parallel: #facc15;
  --rarity-SE: #fde047;
  /* rarity นอกตารางของ Kayou */
  --rarity-SP: #f97316;
  --rarity-GP: #eab308;
  --rarity-ZR: #6366f1;
  --rarity-CR: #f43f5e;
}

/* ── ธีมสว่าง: ขาวงาช้าง + ตัวอักษรดำ ทองโทนเข้มให้อ่านออกบนพื้นขาว ── */
:root[data-theme='light'] {
  --bg: #faf8f4;
  --bg-elevated: #ffffff;
  --bg-sunken: #f2eee6;
  --bg-hover: #f4f0e8;
  --border: #e5ded2;
  --border-strong: #cdc3b2;

  --text: #0d0d0d;
  --text-muted: #57524a;
  --text-faint: #8a8377;

  --accent: #f26213;
  --accent-hover: #ff7a2e;
  --accent-soft: rgba(242, 98, 19, 0.1);
  --accent-grad: linear-gradient(135deg, #ff8a3d 0%, #f26213 52%, #d9480f 100%);
  --accent-glow: 0 10px 24px -12px rgba(217, 72, 15, 0.55);
  --on-accent: #140800;

  --gold: #8f6d14;
  --gold-hover: #6f540c;
  --gold-soft: rgba(176, 138, 32, 0.1);
  --gold-line: rgba(176, 138, 32, 0.4);
  --gold-grad: linear-gradient(135deg, #ecd48a 0%, #b8912a 48%, #8a6510 100%);
  --gold-foil: linear-gradient(180deg, #c49a2e 0%, #9c7616 55%, #7a5a0c 100%);
  --on-gold: #ffffff;

  --success: #17874a;
  --success-soft: rgba(23, 135, 74, 0.1);
  --danger: #cc2f34;
  --danger-soft: rgba(204, 47, 52, 0.1);
  --warning: #a86b04;
  --warning-soft: rgba(168, 107, 4, 0.1);

  --shadow-card: 0 18px 40px -22px rgba(40, 30, 10, 0.35);
  --shadow-pop: 0 18px 48px rgba(40, 30, 10, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-gold: 0 0 0 1px var(--gold-line), 0 18px 40px -22px rgba(143, 109, 20, 0.45);

  --rarity-R: #6b7280;
  /* ทองอ่อนแทบมองไม่เห็นบนพื้นสว่าง จึงใช้โทนเข้มขึ้น */
  --rarity-ASP-parallel: #ca8a04;
  --rarity-SE: #a16207;
}

/* ตัวช่วย: ดึงสีของ rarity ที่กำหนดผ่าน data-rarity มาใส่ตัวแปรเดียว */
[data-rarity] {
  --rarity-color: var(--rarity-R);
  --rarity-ink: #fff;
}
[data-rarity='R'] { --rarity-color: var(--rarity-R); }
[data-rarity='SR'] { --rarity-color: var(--rarity-SR); }
[data-rarity='SSR'] { --rarity-color: var(--rarity-SSR); }
[data-rarity='UR'] { --rarity-color: var(--rarity-UR); }
[data-rarity='◇UR'] { --rarity-color: var(--rarity-UR-parallel); }
[data-rarity='HR'] { --rarity-color: var(--rarity-HR); }
[data-rarity='PU'] { --rarity-color: var(--rarity-PU); }
[data-rarity='MR'] { --rarity-color: var(--rarity-MR); }
[data-rarity='BP'] { --rarity-color: var(--rarity-BP); }
[data-rarity='AR'] { --rarity-color: var(--rarity-AR); }
[data-rarity='ASP'] { --rarity-color: var(--rarity-ASP); }
[data-rarity='◇ASP'] { --rarity-color: var(--rarity-ASP-parallel); }
[data-rarity='SE'] { --rarity-color: var(--rarity-SE); }
[data-rarity='SP'] { --rarity-color: var(--rarity-SP); }
[data-rarity='GP'] { --rarity-color: var(--rarity-GP); }
[data-rarity='ZR'] { --rarity-color: var(--rarity-ZR); }
[data-rarity='CR'] { --rarity-color: var(--rarity-CR); }

/* ป้ายสีทองสว่าง ตัวหนังสือขาวอ่านแทบไม่ออก จึงใช้ตัวหนังสือเข้มแทน */
[data-rarity='AR'],
[data-rarity='ASP'],
[data-rarity='◇ASP'] { --rarity-ink: #1c1917; }