/* ═══════════════════════════════════════════════════════════════════ FABLE DESIGN TOKENS — v1 (2026-07-12, เขียนโดย Fable 5) ใช้คู่กับ fable-components.css — อ่านวิธีใช้ใน PLAYBOOK.md วิธีใช้: 1. เขียน scene 1 ประโยคก่อน (ใครใช้ ที่ไหน อารมณ์ไหน) — ห้ามข้าม 2. เลือกธีมจาก scene: 3. ถ้าไม่มีธีมไหนตรง scene → ก๊อปบล็อกธีมที่ใกล้สุด แล้วปรับ hue (ห้ามหยิบธีมเพราะ "หมวดธุรกิจเดียวกัน" — เลือกจาก scene เท่านั้น) 4. โค้ดคอมโพเนนต์อ้าง var() เท่านั้น ห้าม hardcode สี ═══════════════════════════════════════════════════════════════════ */ /* ── โครงสร้าง (ใช้ร่วมทุกธีม) ─────────────────────────────────── */ :root { /* ฟอนต์ — ไทยจริงเสมอ (กฎเหล็ก BUILD-BIBLE ข้อ 7) */ --font-body: 'Noto Sans Thai', system-ui, sans-serif; --font-display: var(--font-body); /* ธีม override ได้ */ --font-mono: 'IBM Plex Mono', ui-monospace, 'Noto Sans Thai', monospace; /* Type scale — base 16-17px, line-height ≥1.5 กันสระไทยโดนตัด */ --fs-sm: .875rem; --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem); --fs-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); --fs-display: clamp(2.1rem, 1.5rem + 3.2vw, 4rem); /* เพดาน ~4rem พอ — ใหญ่กว่านี้คือตะโกน */ --lh-body: 1.65; --lh-tight: 1.3; /* Spacing — สเกล 4pt */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; /* รูปทรง + เงา */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.05); --shadow-2: 0 4px 10px rgba(0,0,0,.08), 0 14px 32px rgba(0,0,0,.10); /* Motion — ease-out เท่านั้น ไม่มี bounce; ทุกอนิเมชันต้องมี reduced-motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: .15s; --dur-2: .28s; /* Z-scale เชิงความหมาย — ห้าม 999/9999 */ --z-nav: 50; --z-dropdown: 60; --z-backdrop: 70; --z-modal: 80; --z-toast: 90; --z-tooltip: 100; /* ความกว้าง */ --w-prose: 68ch; /* ความยาวบรรทัดอ่านสบาย */ --w-page: 1120px; --tap-min: 44px; /* จุดกดขั้นต่ำบนมือถือ */ } /* ═══ ธีม 1: fable-paper — เอกสาร/คู่มือ/รายงาน (สว่าง) ═══════════ Scene: "อ่านจริงจังกลางวัน ต้องสแกนเร็ว เหมือนคู่มือช่างพิมพ์เนี้ยบๆ" ข้อสังเกต: กระดาษ *ขาวกลาง* (chroma 0) — ไม่ใช่ครีม/beige (ลายเซ็น AI) */ :root, [data-theme="fable-paper"] { --bg: #fdfdfc; --surface: #ffffff; --surface-2: #f4f4f2; /* แถบ/แผงอ่อน */ --ink: #1b1c1e; /* ตัวหนังสือหลัก — เกือบดำ ไม่ใช่เทาจาง */ --muted: #55575c; /* รอง — ยังผ่าน 4.5:1 บน --bg */ --line: #dcdcd7; --accent: #bb3a26; /* แดงชาด — ตราประทับคู่มือช่าง */ --accent-ink: #ffffff; /* ตัวหนังสือบน accent */ --accent-soft: #f8e9e5; /* พื้นอ่อนของ accent (ใช้น้อยๆ) */ --ok: #22693a; --warn: #94610b; --bad: #a52c1b; --focus: #1d4ed8; /* วง focus-visible ≥3:1 กับพื้น */ } /* ═══ ธีม 2: fable-ink — พรีเมียม/พอร์ตโฟลิโอ/แบรนด์หรู (มืด) ═════ Scene: "เปิดดูตอนค่ำ อยากได้ความรู้สึกแกลเลอรีหรู นิ่ง มีราคา" (โทนดำ-ทองที่ user รัก — ห้ามเสนอรื้อ) */ [data-theme="fable-ink"] { --bg: #101113; --surface: #17181b; --surface-2: #1f2024; --ink: #eceae4; --muted: #a09d94; --line: #2c2d31; --accent: #c9a45c; /* ทองหม่น ไม่ใช่ทองสะท้อน */ --accent-ink: #14120c; --accent-soft: #26221a; --ok: #6fbf8b; --warn: #d9a94a; --bad: #e07a68; --focus: #7ea6ff; } /* ═══ ธีม 3: fable-field — ระบบภายใน/dashboard/ฟอร์มงาน (สว่าง) ═══ Scene: "พนักงานใช้ทั้งวันบนจอออฟฟิศ+มือถือ ต้องอ่านตัวเลขไว ไม่เมื่อยตา" เข้ากับตระกูล kk-polish (navy #0f1f38 / blue #3b82f6) */ [data-theme="fable-field"] { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef1f5; --ink: #17233b; --muted: #51607d; --line: #d7dce4; --accent: #1d4ed8; --accent-ink: #ffffff; --accent-soft: #e4ecfb; --ok: #15803d; --warn: #a16207; --bad: #b91c1c; --focus: #1d4ed8; } /* ═══ ธีม 4: fable-night — consumer กลางคืน/ร้าน/อีเวนต์ (มืดอุ่น) ═══ Scene: "ลูกค้าเปิดจากมือถือใน LINE ตอนกลางคืน แสงน้อย อยากได้บรรยากาศร้านจริง" มืดแบบ *อุ่น* มีสีของแบรนด์ ไม่ใช่ดำ+นีออนสำเร็จรูป */ [data-theme="fable-night"] { --bg: #171114; --surface: #201820; --surface-2: #2a1f28; --ink: #f1e8e6; --muted: #b5a3a4; --line: #3a2d36; --accent: #d96a4e; /* ส้มอิฐอุ่น — ปรับ hue ตามแบรนด์จริงได้ */ --accent-ink: #21100b; --accent-soft: #35211d; --ok: #7cc793; --warn: #dcae57; --bad: #e8887a; --focus: #8fb4ff; } /* ── Base ที่ทุกหน้าได้ฟรีเมื่อโหลดไฟล์นี้ ───────────────────────── */ body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: var(--lh-tight); text-wrap: balance; font-family: var(--font-display); } p { max-width: var(--w-prose); text-wrap: pretty; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } img { max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }