/* ════════════════════════════════════════════════════════════════════
design-tokens.css — ค่ากลางของดีไซน์ SKILL ไร้เทียมทาน (งาน 4 · 26 ก.ย. 2569)
────────────────────────────────────────────────────────────────────
• ทุกค่าในไฟล์นี้ "ดึงจากที่เว็บใช้อยู่จริง" (courses/subjects/go-learn/quiz/index,
theme-skin.css, glass-ui.css, styles/glassmorphism.css) ไม่ได้คิดสีใหม่
• ชื่อขึ้นต้นด้วย --s9- ทั้งหมด เพื่อไม่ชนกับตัวแปรเดิมของแต่ละหน้า
(--accent, --bg, --sk-* ใน theme-skin.css ฯลฯ) → ใส่ไฟล์นี้ในหน้าไหนก็ไม่ทำให้หน้าเดิมเพี้ยน
• โหมด: ค่าเริ่มต้น = โทนสว่าง "Glass Light" (หน้าส่วนใหญ่)
ใส่ class="s9-dark" ที่ (หรือกล่องใดก็ได้) = โทนมืด "Glass Blue"
(แบบ quiz.html / แผงหลักของหน้าแรก)
วิธีใช้:
← ถ้าจะใช้ปุ่ม/การ์ด/เมนูกลาง
════════════════════════════════════════════════════════════════════ */
:root{
/* ── สีแบรนด์ ── */
--s9-gold:#B8860B; /* สีหลัก (ปุ่ม, ลิงก์เน้น, เส้นใต้) — courses/go-learn/theme-skin */
--s9-gold-hover:#9A6E08;
--s9-gold-soft:#F5EDD3; /* พื้นป้าย/ไฮไลต์อ่อน */
--s9-gold-bright:#F7B84A; /* ทองบนพื้นมืด (ปุ่ม VIP หน้าแรก) */
--s9-gold-deep:#C9A227; /* กรอบภาพ hero หน้า subjects */
/* งาน 7 (การเข้าถึง): ทอง #B8860B บนพื้นขาวมี contrast แค่ ~3:1 → ใช้กับเส้น/พื้น/ไอคอนได้ แต่ข้อความใช้ 2 ค่านี้ */
--s9-gold-text:#7A5706; /* ตัวอักษรทองขนาดปกติ — ≥4.6:1 บนพื้นสว่างทุกสีของเว็บ */
--s9-gold-large:#9A6E08; /* ตัวอักษรทองขนาดใหญ่ (≥24px หรือ ≥18.7px หนา) — ≥3:1 · และพื้นปุ่มที่ตัวอักษรขาว (4.56:1) */
--s9-sky:#38BDF8; /* สีหลักบนพื้นมืด — quiz */
--s9-sky-deep:#0284C7;
--s9-sky-soft:#62C8F3; /* หน้าแรก --pr */
--s9-sky-ink:#147BC2; /* หน้าแรก --pr-d */
--s9-violet:#7C3AED; /* หน้า subjects */
--s9-violet-2:#9B5CF5;
/* ── สีความหมาย ── */
--s9-success:#16A34A; --s9-success-soft:#D1FAE5; --s9-success-ink:#065F46;
--s9-danger:#DC2626; --s9-danger-soft:#FEE2E2; --s9-danger-ink:#991B1B;
--s9-warning:#F59E0B; --s9-warning-ink:#B45309;
--s9-info:#3B82F6;
/* ── สีประจำวิชา (หน้า subjects) ── */
--s9-subj-math:#B45309; --s9-subj-sci:#0D9488; --s9-subj-eng:#1D4ED8; --s9-subj-thai:#B91C1C;
--s9-subj-social:#92400E; --s9-subj-code:#5B21B6; --s9-subj-go:#7A5A1E; --s9-subj-chinese:#DC2626;
/* ── พื้น / ตัวอักษร / เส้น (โทนสว่าง) ── */
--s9-bg:#F1F4F8;
--s9-bg-violet:#F5F3FC;
--s9-bg-beige:#EDE3CC; /* หน้าเรียนหมากล้อม */
--s9-surface:#FFFFFF;
--s9-surface-beige:#FAF4E6;
--s9-ink:#1E232B; /* ตัวอักษรหลัก */
--s9-ink-2:#555B63; /* ตัวอักษรรอง */
--s9-ink-3:#555B63; /* ตัวอักษรจาง — ≥4.8:1 บนพื้นสว่างทุกสีของเว็บ (เดิม #6B7280 ไม่ผ่านบนพื้นฟ้าอ่อน/เบจ) */
--s9-ink-faint:#A8B1B8; /* ใช้กับของตกแต่งเท่านั้น (contrast ต่ำ ห้ามใช้กับข้อความสำคัญ) */
--s9-border:#E6EAEF;
--s9-border-strong:#C8CDD2;
--s9-border-beige:#D8C9A8;
/* ── กระจก (glass) ── */
--s9-glass-bg:linear-gradient(135deg,rgba(255,255,255,.46),rgba(244,248,255,.18));
--s9-glass-bg-strong:linear-gradient(135deg,rgba(255,255,255,.66),rgba(244,248,255,.42));
--s9-glass-border:rgba(255,255,255,.70);
--s9-glass-blur:blur(5px) saturate(135%);
--s9-nav-bg:rgba(255,255,255,.55);
/* ── ฟอนต์ ── */
--s9-font-head:'Kanit','Noto Sans Thai',system-ui,sans-serif; /* หัวข้อ ปุ่ม เมนู */
--s9-font-body:'Sarabun','Noto Sans Thai',system-ui,sans-serif; /* เนื้อหา */
--s9-font-kids:'Fredoka','Sarabun',system-ui,sans-serif; /* หน้าเด็ก (subjects/quiz) */
--s9-font-serif:'Playfair Display','Trirong',serif; /* ตัวตกแต่ง (theme-skin) */
/* ── ขนาดตัวอักษร (rem = 16px) ── ค่าที่เว็บใช้บ่อยจริง ปัดเป็นขั้น */
--s9-fs-xs:.75rem; /* 12px ป้ายเล็ก */
--s9-fs-sm:.875rem; /* 14px ข้อความรอง (ขั้นต่ำบนมือถือ) */
--s9-fs-md:1rem; /* 16px เนื้อหา */
--s9-fs-lg:1.125rem; /* 18px */
--s9-fs-xl:1.4rem; /* หัวข้อการ์ด/ส่วน */
--s9-fs-2xl:1.8rem;
--s9-fs-hero:clamp(2rem,6vw,3.4rem);
--s9-lh:1.6; /* ระยะบรรทัดเนื้อหาไทย */
--s9-lh-tight:1.25;
/* ── ระยะห่าง ── */
--s9-sp-1:4px; --s9-sp-2:8px; --s9-sp-3:12px; --s9-sp-4:16px; --s9-sp-5:24px; --s9-sp-6:32px; --s9-sp-7:48px;
--s9-gutter:5vw; /* ขอบซ้าย-ขวาของแถบเมนู/ส่วนท้าย (ทุกหน้าใช้ 5vw) */
--s9-maxw:1100px;
/* ── มุมโค้ง ── */
--s9-r-xs:8px; --s9-r-sm:12px; --s9-r-md:14px; --s9-r-lg:18px; --s9-r-xl:22px; --s9-r-pill:999px;
/* ── เงา ── (courses.html) */
--s9-sh-xs:0 1px 2px rgba(20,30,55,.04),0 2px 8px rgba(20,30,55,.05);
--s9-sh-sm:0 2px 6px rgba(20,30,55,.05),0 8px 20px rgba(20,30,55,.07);
--s9-sh-md:0 4px 12px rgba(20,30,55,.06),0 14px 34px rgba(20,30,55,.10);
--s9-sh-hover:0 10px 26px rgba(20,30,55,.10),0 24px 54px rgba(20,30,55,.16);
--s9-sh-glow-sky:0 6px 20px rgba(56,189,248,.35);
/* ── การเคลื่อนไหว ── */
--s9-ease:cubic-bezier(.2,.8,.2,1);
--s9-bounce:cubic-bezier(.34,1.56,.64,1);
--s9-dur:.2s;
/* ── ค่าที่คอมโพเนนต์อ่าน (สลับตามโหมด) ── */
--s9-c-bg:var(--s9-bg);
--s9-c-surface:var(--s9-surface);
--s9-c-ink:var(--s9-ink);
--s9-c-ink-2:var(--s9-ink-2);
--s9-c-ink-3:var(--s9-ink-3);
--s9-c-border:var(--s9-border);
--s9-c-primary:var(--s9-gold-large); /* พื้นปุ่มหลัก: ตัวอักษรขาว 4.56:1 */
--s9-c-primary-hover:#7F5A06;
--s9-c-primary-text:var(--s9-gold-text); /* ลิงก์/ข้อความเน้นสีทอง */
--s9-c-on-primary:#FFFFFF;
--s9-c-focus:#2563EB;
--s9-c-nav-bg:var(--s9-nav-bg);
}
/* ── โทนมืด "Glass Blue" (quiz.html, แผงหลักหน้าแรก, styles/glassmorphism.css) ── */
.s9-dark{
--s9-dark-bg:#0B0F19;
--s9-dark-bg-2:#0F172A;
--s9-dark-navy:#07162F;
--s9-dark-navy-2:#0B2A57;
--s9-dark-ink:#F8FAFC;
--s9-dark-ink-2:#CBD5E1;
--s9-dark-ink-3:#94A3B8;
--s9-dark-border:rgba(255,255,255,.12);
--s9-dark-glass:rgba(255,255,255,.09);
--s9-c-bg:var(--s9-dark-bg);
--s9-c-surface:var(--s9-dark-glass);
--s9-c-ink:var(--s9-dark-ink);
--s9-c-ink-2:var(--s9-dark-ink-2);
--s9-c-ink-3:var(--s9-dark-ink-3);
--s9-c-border:var(--s9-dark-border);
--s9-c-primary:var(--s9-sky);
--s9-c-primary-hover:var(--s9-sky-deep);
--s9-c-primary-text:var(--s9-sky);
--s9-c-on-primary:var(--s9-dark-bg-2);
--s9-c-focus:#7DD3FC;
--s9-c-nav-bg:rgba(11,15,25,.88);
}