/* tokens.css — ZEEDSUB design tokens ⚠️ ห้าม hardcode สีในไฟล์หน้า ใช้ตัวแปรจากที่นี่เท่านั้น สลับธีมด้วย */ /* ⚠️ light = ค่าเริ่มต้นของ ZEEDSUB → ประกาศที่ :root ตรง ๆ ไม่ใช่ [data-theme="light"] เพียงอย่างเดียว ไม่งั้นหน้าที่ไม่ได้ตั้ง attribute จะไม่มี token เลย (จอขาวโล่ง). [data-theme="light"] คงไว้เป็น override ชัดเจน ตอนผู้ใช้สลับกลับจาก dark */ :root, :root[data-theme="light"]{ --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:#FAFAFA; --panel-3:#F3F3F4; --line:#E7E7EA; --line-2:#D6D6DB; --ink:#0A0A0B; /* 19.79:1 บนพื้นขาว */ --ink-2:#57575F; /* WCAG AA: 7.16:1 บนพื้นขาว */ /* WCAG AA: 5.02:1 บนพื้นขาว · 4.52:1 บน --panel-3 (เดิม #9A9AA2 = 2.79:1 ตกเกณฑ์) ⚠️ token นี้ถูกใช้เป็น body text จริงกว่า 20 จุด (.field .hint 11.5px, .plan-per, .ed-sub, .data-table th …) จึงต้องผ่าน 4.5:1 ไม่ใช่แค่ 3:1 */ --ink-3:#6E6E76; --red:#E31837; /* 7.16:1 — ห้ามเปลี่ยน (สีแบรนด์) */ --red-hover:#C4142E; --red-soft:rgba(227,24,55,.07); /* WCAG AA: 4.94:1 บนพื้นขาว · 4.67:1 บน --green-soft (เดิม #0F9D58 = 3.51:1 ตกเกณฑ์) ใช้เป็นสีตัวอักษรใน .badge.green / .alert-msg.ok / .toast.ok / .plan-feat li i */ --green:#0C8149; --green-soft:#ECFDF5; /* WCAG AA: 4.82:1 บนพื้นขาว · 4.55:1 บน --amber-soft (เดิม #E59500 = 2.43:1 ตกเกณฑ์) เข้มลงมากเพราะเหลืองส้มสว่างผ่าน 4.5:1 บนพื้นขาวไม่ได้เลย */ --amber:#9E6600; --amber-soft:#FFF8E6; /* WCAG AA: 5.47:1 บนพื้นขาว · 4.78:1 บน --blue-soft (เดิม #2E7DD7 = 4.17:1 ตกเกณฑ์) */ --blue:#276AB8; --blue-soft:#E6F0FB; --shadow-lg:0 20px 50px -20px rgba(0,0,0,.25); --overlay:rgba(0,0,0,.4); } :root[data-theme="dark"]{ --bg:#0B0B0C; --panel:#0F0F11; --panel-2:#141416; --panel-3:#1C1C20; --line:#232327; --line-2:#33333A; --ink:#F5F5F7; --ink-2:#9C9CA4; /* 7.22:1 บน --bg */ /* WCAG AA: 5.30:1 บน --bg · 4.57:1 บน --panel-3 (เดิม #66666D = 3.45:1 ตกเกณฑ์) */ --ink-3:#84848C; --red:#FF2E4D; --red-hover:#FF556D; --red-soft:rgba(255,46,77,.12); --green:#25C26B; /* 8.44:1 บน --bg — ผ่านอยู่แล้ว ไม่แตะ */ --green-soft:rgba(37,194,107,.12); /* ⚠️ ต่างจากสเปค (#E59500) โดยตั้งใจ — ยกความสว่างให้อ่านง่ายบนพื้นดำ 9.75:1 (#E59500 บนพื้นดำได้ 8.06:1 ก็ผ่าน แต่ดูขุ่น) เก็บไว้ตามเดิม */ --amber:#F5A623; --amber-soft:rgba(245,166,35,.12); /* ⚠️ ต่างจากสเปค (#2E7DD7) โดยตั้งใจ — ยกความสว่างให้ได้ 7.15:1 บนพื้นดำ */ --blue:#5AA0E8; --blue-soft:rgba(90,160,232,.12); --shadow-lg:0 20px 50px -20px rgba(0,0,0,.6); --overlay:rgba(0,0,0,.6); } :root{ /* รูปทรง */ --rad:8px; --rad-s:5px; --rad-pill:999px; /* ระยะ — สเกล 4pt */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* ความสูง control — ขั้นต่ำ 44px บนมือถือ (WCAG 2.2) */ --h-sm:36px; --h-md:40px; --h-lg:48px; /* layout ⚠️ gutter เป็น fluid ตัวเดียว ไม่ใช่ media query เป็นขั้น ๆ เดิม 28px คงที่ + หด 16px ที่ ≤640 → ช่วง 641-1023px (แท็บเล็ต) ได้ขอบ 28px เท่าเดสก์ท็อปทั้งที่จอแคบกว่ามาก = เนื้อหาถูกบีบ clamp นี้ให้ 12px บนจอ 320 · ~14px บน 640 · ~22px บน iPad · 28px บน 1280 (เท่าค่าเดิมพอดี) · ตัน 40px บนจอใหญ่ */ --gut:clamp(12px, 2.2vw, 40px); /* ⚠️ ความกว้างสูงสุดของหน้า public (landing / pricing / legal) เท่านั้น ❌ ห้ามใช้กับหน้าในระบบ — ZEEDSUB กำหนดให้เต็มความกว้าง ไม่จำกัด max-width */ --maxw:1140px; --sidebar-w:248px; --topbar-h:60px; --bottomnav-h:64px; /* z-index — จดไว้ที่เดียวกันหมด อย่าเดา */ --z-sticky:20; --z-topbar:40; --z-drawer:60; --z-modal:80; --z-toast:100; --ease:cubic-bezier(.4,0,.2,1); --t-fast:.12s; --t-mid:.22s; --font:"Prompt",system-ui,-apple-system,"Segoe UI",sans-serif; } /* 💡 ไม่มี @media สำหรับ --gut แล้ว — clamp ด้านบนจัดการทุกความกว้างต่อเนื่อง breakpoint ที่เหลือของทั้งระบบดูที่ responsive.css (โหลดท้ายสุด) */