/* ===================================================================== Design tokens — ดึงมาจากไฟล์ดีไซน์ ADSPRO SMM Panel ธีม "สว่าง" เป็นค่าเริ่มต้น, ธีม "มืด" เปิดด้วย --------------------------------------------------------------------- เวลาจะเปลี่ยนสีทั้งเว็บ ให้แก้ที่นี่ที่เดียว ห้ามใส่ค่าสีดิบในหน้าอื่น ===================================================================== */ :root { /* พื้นหลัง / พื้นผิว */ --bg: #F3F5FB; --bg2: #ECEFF8; --card: #FFFFFF; --card2: #F7F8FD; --line: #E4E7F2; --chipbg: #EEF0F9; --inputbg: #F4F5FB; /* ตัวอักษร */ --text: #161630; --mut: #6A6F88; /* สีหลักของแบรนด์ */ --accent: #6A48FF; --accent2: #7E5FFF; --accsoft: rgba(106, 72, 255, .10); /* --accent2 ใช้เป็นพื้น/ไล่เฉดได้ แต่เอามาเป็นสีตัวอักษรบนพื้นสว่างไม่ผ่าน (วัดได้ 3.88:1 เกณฑ์ WCAG AA ตัวอักษรเล็กคือ 4.5:1) ตัวอักษรสีแบรนด์ทุกจุดจึงต้องใช้ --accent-ink แทน — วัดได้ 6.10:1 บนพื้นหน้าเว็บ */ --accent-ink: #5B34E8; /* --mut บนพื้น --bg2 ของแถบเมนูซ้ายได้แค่ 4.31:1 ต้องเข้มกว่านี้อีกนิด */ --mut-ink: #5A5F75; /* สีบอกสถานะ (แยกจากสีแบรนด์) ค่าปกติ = ใช้เป็นพื้น/เส้น/ไอคอน ค่า -ink = ใช้เป็นสีตัวอักษรเท่านั้น เพราะสีสดบนพื้นสว่างอ่านไม่ผ่านเกณฑ์ (เช่น --warn บน --warnsoft ได้แค่ 2.58:1) ตัวเลขในวงเล็บคือคอนทราสต์ที่วัดจริงบนพื้นป้าย / การ์ดขาว / พื้นหน้าเว็บ */ --good: #0FA97B; --goodsoft: rgba(15, 169, 123, .12); --good-ink: #0A7A58; /* 4.70 / 5.33 / 4.89 */ --bad: #E5476B; --badsoft: rgba(229, 71, 107, .10); --bad-ink: #C93356; /* 4.52 / 5.13 / 4.71 */ --warn: #D9821B; --warnsoft: rgba(217, 130, 27, .13); --warn-ink: #9A5B08; /* 4.77 / 5.42 / 4.97 */ --info: #2F7BE0; --infosoft: rgba(47, 123, 224, .11); --info-ink: #2467BE; /* 4.88 / 5.59 / 5.13 */ /* เงา / แสง */ --shadow: 0 18px 45px rgba(35, 40, 80, .10); --glow: 0 0 44px rgba(106, 72, 255, .16); /* ระยะห่าง — ใช้สเกลนี้เท่านั้น อย่าเดาค่าเอง */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* ความโค้ง */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; /* ฟอนต์ */ --font-th: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-num: 'Space Grotesk', var(--font-th); /* ความกว้างเนื้อหา */ --container: 1240px; } :root[data-theme="dark"] { --bg: #0A0A12; --bg2: #0E0E18; --card: #13131F; --card2: #181827; --line: #232336; --chipbg: #1A1A29; --inputbg: #0F0F1A; --text: #F1F1F8; --mut: #8E8EA8; --accent: #7C5CFF; --accent2: #9B82FF; --accsoft: rgba(124, 92, 255, .14); --accent-ink: #9B82FF; /* ธีมมืดสีนี้ได้ 6.60:1 อยู่แล้ว ไม่ต้องปรับ */ --mut-ink: #8E8EA8; /* ธีมมืดใช้ค่าเดียวกับ --mut ได้เลย */ /* ธีมมืดสีสดอ่านผ่านเกณฑ์อยู่แล้ว (วัดได้ 7.98–8.13:1) ค่า -ink จึงเท่ากับค่าปกติ */ --good: #2BD9A4; --goodsoft: rgba(43, 217, 164, .13); --good-ink: #2BD9A4; --bad: #FF5C7A; --badsoft: rgba(255, 92, 122, .13); --bad-ink: #FF5C7A; --warn: #FFB454; --warnsoft: rgba(255, 180, 84, .13); --warn-ink: #FFB454; --info: #4EA3FF; --infosoft: rgba(78, 163, 255, .13); --info-ink: #4EA3FF; --shadow: 0 18px 50px rgba(0, 0, 0, .45); --glow: 0 0 44px rgba(124, 92, 255, .28); } /* ===================================================================== พรีเซ็ตสีแบรนด์ (สลับแบรนด์ได้จากหลังบ้าน /admin/settings) --------------------------------------------------------------------- เปิดใช้ด้วย (helper brand_attr) — main = ค่าเริ่มต้น ด้านบน ไม่ต้องมีบล็อก. แต่ละพรีเซ็ต override เฉพาะ 5 ตัวแปรสีแบรนด์ (--accent --accent2 --accsoft --accent-ink --glow) ทั้งโหมดสว่างและมืด *** สี --accent-ink ทุกตัวตรวจแล้วผ่านคอนทราสต์ WCAG AA >= 4.5:1 บนพื้นของโหมดนั้น *** ("custom" ไม่อยู่ที่นี่ — ฉีดเป็น