/* สไตล์ทั้งระบบอยู่ไฟล์นี้ไฟล์เดียว ค่าธีมทั้งหมดมาจาก project/DESIGN.md · ห้ามสร้างไฟล์ CSS แยกต่อหน้า ห้ามเขียนค่าสีหรือระยะห่างดิบ — ใช้ var(--...) เท่านั้น */ /* TOKENS:BEGIN */ /* generate จาก project/DESIGN.md — ห้ามแก้ด้วยมือ แก้ค่าที่ DESIGN.md แล้วรัน: php scripts/design-sync.php */ :root { --color-brand-primary: #C2410C; --color-brand-on-primary: #FFFFFF; --color-surface-page: #F6F7F9; --color-surface-card: #FFFFFF; --color-surface-raised: #EFF2F6; --color-text-strong: #16223A; --color-text-normal: #3D4759; --color-text-muted: #5A6473; --color-border-normal: #E2E7EE; --color-border-strong: #6E7787; --color-state-success: #15803D; --color-state-warning: #B45309; --color-state-danger: #B91C1C; --color-state-info: #1D4ED8; --color-focus: #C2410C; --color-overlay: rgb(0 0 0 / .45); --font-heading: "system-ui"; --font-body: "system-ui"; --font-mono: "ui-monospace"; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-display: 4rem; --weight-normal: 400; --weight-medium: 500; --weight-bold: 600; --leading-tight: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; --icon-sm: 16px; --icon-base: 20px; --icon-lg: 32px; --icon-xl: 48px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 2px 6px rgba(0,0,0,.06); --shadow-lg: 0 8px 20px rgba(0,0,0,.08); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(.2,0,0,1); --ease-enter: cubic-bezier(0,0,0,1); --table-row-height: 44px; --table-cell-padding: 0 12px; --table-head-background: transparent; --table-head-padding: 8px 12px; --table-font-size: 0.875rem; --badge-radius: 4px; --badge-type-border-style: dashed; --badge-status-border-style: solid; --hero-min-height: 560px; --hero-min-height-mobile: 420px; --hero-gap: 48px; --hero-image-ratio: 3 / 4; --hero-scrim: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .45) 42%, rgb(0 0 0 / .08) 100%); --hero-on-image: #FFFFFF; --product-card-image-ratio: 3 / 4; --product-card-gap: 16px; --product-card-grid-gap: 32px; --product-card-name-size: 1.0625rem; --product-card-meta-size: 0.9375rem; --prose-max-width: 68ch; --prose-paragraph-gap: 16px; --prose-heading-gap: 36px; --news-item-image-ratio: 16 / 9; --news-item-image-width: 320px; --news-item-gap: 24px; --news-item-divider-style: 1px solid var(--color-border-normal); --layout-max-width: 1440px; --layout-form-width: 760px; --layout-field-min-width: 220px; --layout-tile-min-width: 260px; --layout-sidebar-width: 240px; --layout-sidebar-collapsed: 60px; --layout-breakpoint: 768px; --layout-menu-min-width: 232px; --layout-detail-label-min: 180px; --layout-detail-label-max: 240px; --layout-thumb-max-width: 220px; --layout-login-card-width: 460px; } /* โหมดตามที่ผู้ใช้เลือก — PHP เขียน data-theme ที่ เพื่อไม่ให้หน้ากะพริบตอนโหลด */ :root[data-theme="dark"] { --color-brand-primary: #FF9147; --color-brand-on-primary: #1A1207; --color-surface-page: #14171C; --color-surface-card: #1C2027; --color-surface-raised: #242932; --color-text-strong: #F2F4F8; --color-text-normal: #CDD3DD; --color-text-muted: #9AA3B2; --color-border-normal: #333A45; --color-border-strong: #7A8494; --color-state-success: #4ADE80; --color-state-warning: #FBBF24; --color-state-danger: #F87171; --color-state-info: #60A5FA; --color-focus: #FF9147; --color-overlay: rgb(0 0 0 / .65); } /* ยังไม่เคยเลือก — ตามค่าของเครื่อง */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-brand-primary: #FF9147; --color-brand-on-primary: #1A1207; --color-surface-page: #14171C; --color-surface-card: #1C2027; --color-surface-raised: #242932; --color-text-strong: #F2F4F8; --color-text-normal: #CDD3DD; --color-text-muted: #9AA3B2; --color-border-normal: #333A45; --color-border-strong: #7A8494; --color-state-success: #4ADE80; --color-state-warning: #FBBF24; --color-state-danger: #F87171; --color-state-info: #60A5FA; --color-focus: #FF9147; --color-overlay: rgb(0 0 0 / .65); } } /* TOKENS:END */ @layer reset, base, layout, components, utilities; @layer reset { *, *::before, *::after { box-sizing: border-box; } /* ‼️ [hidden] ของเบราว์เซอร์คือ display:none ที่ specificity ต่ำสุด component ไหนตั้ง display:flex/grid ไว้ จะทับมันทั้งหมด ผลคือ JS ตั้ง element.hidden = true สำเร็จจริง ตัวนับถูก แต่ของยังโผล่บนหน้า เป็นบั๊กที่ตรวจจากโค้ดไม่เห็นเลย เห็นได้ทางเดียวคือเปิดหน้าดู !important ในชั้นล่างชนะ declaration ปกติของชั้นที่สูงกว่า ซึ่งคือสิ่งที่ต้องการตรงนี้พอดี */ [hidden] { display: none !important; } /* ‼️ ไอคอนต้องมีขนาดของตัวเองทุกขนาดที่ view เรียกใช้ empty-state.php เรียก icon('...', 'icon-lg') มาตั้งแต่ต้น แต่ไม่มีคลาสนี้ใน CSS ไอคอนของสถานะว่างจึงเล็กเท่าไอคอนในปุ่ม ดูเหมือนไอคอนหลุดมา เป็น typo ที่ไม่มีอะไรจับได้เลย เพราะ CSS ที่ไม่มีอยู่ไม่เคยรายงาน error */ .icon { width: var(--icon-base); height: var(--icon-base); flex-shrink: 0; } .icon-sm { width: var(--icon-sm); height: var(--icon-sm); } .icon-lg { width: var(--icon-lg); height: var(--icon-lg); } .icon-xl { width: var(--icon-xl); height: var(--icon-xl); } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; } fieldset, legend { padding: 0; border: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } img, picture, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } } @layer base { /* ‼️ ต้องผูก color-scheme กับธีมที่ "ระบบ" เลือก ไม่ใช่ธีมของ "เครื่อง" ถ้าปล่อยเป็น `light dark` เฉยๆ native control (select, ปฏิทิน, แถบเลื่อน) จะตามธีมของ OS ผลคือผู้ใช้เลือกโหมดสว่างแต่