/* theme.css — Design tokens (CSS variables) สำหรับ light + dark theme ยึดตาม ARCHITECTURE.md ข้อ 8: data-theme บน Phase U0: ยกเครื่องค่าภาพให้ตรงต้นแบบ standalone (Inter, sidebar #1e2a3a, accent #3b82f6, การ์ดเงานุ่ม, radius 10-12px) — คงชื่อ variable เดิมทั้งหมด */ /* ── Inter (self-host, ไม่พึ่ง Google Fonts CDN) ── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/inter/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/inter/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/inter/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/inter/inter-700.woff2') format('woff2'); } :root { /* Font — Inter นำหน้า, มี fallback ไทย/ระบบเสมอ */ --font-sans: 'Inter', "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "Cascadia Code", "Consolas", monospace; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 0.95rem; --fs-lg: 1.1rem; --fs-xl: 1.35rem; --fs-2xl: 1.75rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-base: 1.5; /* Spacing scale */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* Transitions & layout sizes */ --transition: 160ms ease; --header-h: 60px; --sidebar-w: 240px; --z-header: 100; --z-sidebar: 90; --z-overlay: 200; --z-modal: 300; --z-toast: 400; /* ---- Light theme (default) — โทนตาม standalone ---- */ --color-bg: #f1f5f9; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-border: #e2e8f0; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-inverse: #ffffff; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-soft: #dbeafe; --color-success: #16a34a; --color-success-soft: #dcfce7; --color-warning: #d97706; --color-warning-soft: #fef3c7; --color-danger: #dc2626; --color-danger-soft: #fee2e2; --color-info: #0891b2; --color-info-soft: #cffafe; /* Sidebar (โทนเข้มถาวรทั้งสองธีม) */ --sidebar-bg: #1e2a3a; --sidebar-text: rgba(255, 255, 255, 0.72); --sidebar-text-hover: #ffffff; --sidebar-active-bg: rgba(59, 130, 246, 0.18); --sidebar-active-accent: #3b82f6; --sidebar-section: rgba(255, 255, 255, 0.32); --sidebar-border: rgba(255, 255, 255, 0.09); /* เงานุ่มแบบ standalone (การ์ด/ตาราง) */ --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18); --overlay-bg: rgba(15, 23, 42, 0.45); } /* ---- Dark theme — โทนตาม standalone (slate 900/800) ---- */ [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #172033; --color-border: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-inverse: #0f172a; --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-primary-soft: #1e335c; --color-success: #22c55e; --color-success-soft: #143024; --color-warning: #f59e0b; --color-warning-soft: #3a2c0c; --color-danger: #ef4444; --color-danger-soft: #3a1414; --color-info: #06b6d4; --color-info-soft: #0c3138; /* Sidebar เข้มขึ้นเล็กน้อยในโหมดมืด */ --sidebar-bg: #16202e; --sidebar-border: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --overlay-bg: rgba(0, 0, 0, 0.6); } /* Base reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); background: var(--color-bg); transition: background var(--transition), color var(--transition); min-height: 100vh; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; font-weight: var(--fw-semibold); color: var(--color-text); } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Utility helpers */ .is-hidden { display: none !important; } .text-muted { color: var(--color-text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-4 { margin-top: var(--sp-4); } .mb-4 { margin-bottom: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-5 { margin-bottom: var(--sp-5); } .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-gap { display: flex; gap: var(--sp-3); align-items: center; } .flex-wrap { flex-wrap: wrap; } .grow { flex: 1; } .grid { display: grid; } /* Scrollbar สวยแบบ standalone (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: content-box; }