/* ===== ตัวแปรสี (CSS Variables) + ธีม Dark/Light ===== */ /* สลับธีมด้วย attribute data-theme ที่ ; ค่าเริ่มต้น = light */ :root, [data-theme='light'] { --bg: #E8F3EF; --card: #FFFFFF; --header-bg: #E1F5EE; --text: #2C2C2A; --text-muted: #5F5E5A; --accent: #1D9E75; --accent-soft: #E1F5EE; --warning-text: #7A4B00; --warning-bg: #FFF0C2; --danger-text: #B42318; --danger-bg: #FEE4E2; /* สีสถานะ (พาสเทล) */ --status-ok: #5DCAA5; --status-low: #FAC775; --status-out: #F09595; --danger: #B42318; --border: #E2E8E3; --shadow: 0 2px 10px rgba(29, 158, 117, 0.08); --shadow-strong: 0 6px 22px rgba(29, 158, 117, 0.18); } [data-theme='dark'] { --bg: #161A19; --card: #252B29; --header-bg: #21302B; --text: #ECEAE3; --text-muted: #9B9A92; --accent: #2BB88C; --accent-soft: #21302B; --warning-text: #FFD166; --warning-bg: #4E3500; --danger-text: #FFB4AB; --danger-bg: #5A1A17; --status-ok: #5DCAA5; --status-low: #FAC775; --status-out: #F09595; --danger: #C33B36; --border: #333B38; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-strong: 0 6px 22px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Kanit', -apple-system, system-ui, sans-serif; font-weight: 400; -webkit-tap-highlight-color: transparent; } body { min-height: 100dvh; } h1, h2, h3 { font-weight: 600; margin: 0; } button { font-family: inherit; cursor: pointer; } .muted { color: var(--text-muted); font-size: 0.85rem; } .row-gap { display: flex; align-items: center; gap: 8px; }