/* ═══════════════════════════════════════════════════════════════════ TCK FOS — ชุดตัวแปรกลาง (แหล่งเดียวของสี/ฟอนต์/ระยะ) แก้ที่ไฟล์นี้ไฟล์เดียว ทุกหน้าเปลี่ยนตาม ทิศทาง (เคาะ 28 ส.ค. 2026): "ดำสนิท-แคปซูล + น้ำเงิน" อ้างอิงจาก aniq-ui.com ที่วัดค่าจริง — ดำเกือบสนิท · แคปซูลทุกชิ้นที่กดได้ · สีเน้นสีเดียว (#1168FD) · ตัวอักษรใหญ่หนา ⚠️ ห้ามเปลี่ยน "ชื่อ" ตัวแปร — มี 60+ หน้าที่เรียกใช้อยู่ (--muted 61 หน้า · --accent 53 หน้า · --bg 51 หน้า ...) เปลี่ยนได้เฉพาะ "ค่า" ── 2 ระดับพื้นผิว ──────────────────────────────────────────────── ค่าเริ่มต้น = ใช้ได้ทุกหน้า (ดำเกือบสนิท ยังอ่านออกในแสงจ้า) [data-surface="dash"] = แดชบอร์ด/รายงานลูกค้า → ดำสนิทจริง ตัวใหญ่ขึ้น [data-surface="floor"] = แท็บเล็ตหน้างาน → คอนทราสต์สูงขึ้น ปุ่มใหญ่ขึ้น ═══════════════════════════════════════════════════════════════════ */ /* ฟอนต์: Inter(ละติน) + Noto Sans Thai(ไทย) — เบราว์เซอร์เลือกทีละตัวอักษร ⚠️ Inter ไม่มีภาษาไทย ถ้าใช้เดี่ยวๆ ไทยจะตกไปใช้ฟอนต์ระบบ จังหวะเพี้ยน มี fallback ระบบครบ ถ้าเครือข่ายบล็อก Google Fonts ก็ยังอ่านได้ปกติ */ @import url('/fos-fonts.css'); /* ฟอนต์เก็บในเซิร์ฟเวอร์เราเอง ไม่พึ่ง Google */ :root{ /* ---------- พื้นผิว ---------- */ --bg:#0A0C10; /* พื้นหน้า — ดำอมน้ำเงิน ไม่ดำสนิทเพื่อให้หน้างานยังอ่านออก */ --bg2:#12151B; /* การ์ด */ --bg3:#191D25; /* หัวตาราง / ชิป */ --bg4:#212632; /* hover / ชั้นถัดไป */ --border:#1E232C; --border2:#2C333F; /* ---------- ตัวอักษร ---------- */ --text:#EDEDED; /* ค่าเดียวกับต้นแบบ */ --muted:#8B93A1; --hint:#6E7684; /* ---------- สีเน้น: น้ำเงินสีเดียว ---------- */ --accent:#1168FD; --accent2:#0B54D6; /* เข้มขึ้น ใช้ตอน hover/กด */ /* ---------- สีสถานะ (พื้น/ขอบ/ตัวอักษร แยกชุด) ---------- ปรับให้เข้ากับน้ำเงิน และแยกจาก --accent ให้ชัด ไม่ให้สับสน --blue = สถานะ "ข้อมูล" (ฟ้าอ่อนกว่า) ≠ --accent = สีแบรนด์ */ --green:#35C86E; --green-bg:#0E2418; --green-border:#1E5236; --amber:#E5A83C; --amber-bg:#2A1F0C; --amber-border:#5A431A; --red:#F0605F; --red-bg:#2B1414; --red-border:#5E2A29; --blue:#58A6FF; --blue-bg:#0D1B2E; --blue-border:#1E3A5F; --purple:#A78BFA; --purple-bg:#1B1630; --purple-border:#3A2E63; /* ---------- ฟอนต์ ---------- */ --font:'Inter','Noto Sans Thai','Noto Sans Myanmar','Segoe UI',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono','Courier New',monospace; --bg-nav:rgba(10,12,16,.94); /* ---------- ระยะ ---------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; /* ---------- ความโค้ง ---------- ลายเซ็นของสไตล์นี้: ทุกชิ้นที่ "กดได้" หรือเป็น "ป้าย" ใช้ --radius-pill */ --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:9999px; /* ---------- เงา ---------- */ --shadow-sm:0 4px 16px rgba(0,0,0,.30); --shadow-md:0 12px 34px rgba(0,0,0,.45); /* ---------- ปุ่ม/ช่องกรอก ---------- */ --control-min:44px; /* ---------- ชื่อเชิงความหมาย: หน้าใหม่ควรใช้ชุดนี้ ---------- */ --surface-page:var(--bg); --surface-card:var(--bg2); --surface-raised:var(--bg3); --surface-hover:var(--bg4); --line-default:var(--border); --line-strong:var(--border2); --text-primary:var(--text); --text-secondary:var(--muted); --text-tertiary:var(--hint); --action-primary:var(--accent); --action-primary-hover:var(--accent2); } /* ---------- แดชบอร์ด / รายงานลูกค้า: ดำสนิทจริง ตัวใหญ่ ---------- ใส่ data-surface="dash" ที่ หรือ */ [data-surface="dash"]{ --bg:#000000; --bg2:rgba(23,23,23,.55); --bg3:rgba(30,30,30,.6); --bg4:rgba(255,255,255,.05); --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.16); --bg-nav:rgba(0,0,0,.92); --radius-lg:14px; } /* ---------- แท็บเล็ตหน้างาน: คอนทราสต์สูงขึ้น สู้แสงจ้า ---------- น้ำเงินสว่างขึ้นเพราะ #1168FD บนดำสนิทอ่านยากกลางแดด */ [data-surface="floor"]{ --bg:#0E1218; --bg2:#161B23; --bg3:#1E242E; --bg4:#28303C; --border:#252C37; --border2:#39424F; --text:#F3F5F8; --muted:#9AA3B2; --accent:#3D8BFF; /* สว่างกว่า อ่านชัดกลางแดด */ --accent2:#1168FD; --control-min:52px; /* ใส่ถุงมือกดได้ */ } /* ---------- โหมดสว่าง (แท็บเล็ต/แสงจ้า) ---------- */ [data-theme="light"]{ --bg:#F4F5F7; --bg2:#FFFFFF; --bg3:#EDEFF3; --bg4:#E1E5EB; --border:#DCE0E6; --border2:#C2C8D1; --text:#12161C; --muted:#57606E; --hint:#6B7482; --accent:#0B54D6; /* เข้มขึ้นเพื่อคอนทราสต์บนพื้นขาว */ --accent2:#083FA3; --green:#1E7D45; --green-bg:#E6F4EC; --green-border:#A9D8BC; --amber:#8A6410; --amber-bg:#FBF1D8; --amber-border:#E6CF8B; --red:#C03A39; --red-bg:#FBEAEA; --red-border:#EBA9A9; --blue:#1A63B8; --blue-bg:#E6EFFA; --blue-border:#AECBE8; --purple:#5B49A8; --purple-bg:#EDEAF8; --purple-border:#C9C0EA; --bg-nav:rgba(255,255,255,.96); --shadow-sm:0 4px 16px rgba(16,24,40,.08); --shadow-md:0 12px 34px rgba(16,24,40,.14); } /* ---------- ของแถมมาตรฐาน (ใช้ได้ทุกหน้า ไม่บังคับ) ---------- */ *{box-sizing:border-box} body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh;margin:0} /* แสงนวลจางๆ ให้มีมิติ — ใช้ radial-gradient ธรรมดา ไม่ใช่ blur (แท็บเล็ตถูกไหว) */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(900px 460px at 14% -6%, rgba(17,104,253,.09), transparent 60%), radial-gradient(760px 420px at 90% 96%, rgba(88,166,255,.05), transparent 58%)} [data-theme="light"] body::before{ background:radial-gradient(900px 460px at 14% -6%, rgba(17,104,253,.06), transparent 60%)} ::selection{background:rgba(17,104,253,.32)} /* ทุกชิ้นที่กดได้ = แคปซูล (ลายเซ็นของสไตล์) — หน้าที่ยังไม่ปรับก็ไม่พัง */ .pill,.chip,.badge{border-radius:var(--radius-pill)} @media screen{ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 72%,white); outline-offset:2px; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }