/* ═══════════════════════════════════════════════════ THIRA theme — design tokens + base เท่านั้น (คอมโพเนนต์อยู่ components.css · โครงหน้าอยู่ layout.css) สลับธีม: · localStorage 'lr-theme' ═══════════════════════════════════════════════════ */ :root { --ac: #B8934A; /* accent ทอง */ /* โทนสว่าง */ --b: #FAF7F2; --s: #FFFFFF; --s2: #FAF7F2; --i: #2A241E; --i2: #6B6760; --i3: #98917F; --i4: #A79F92; --i5: #B4AEA3; --l: #EEE9E1; --l2: #F2EDE6; --bt: #2A241E; --bi: #F7F2E9; --bh: #3A322A; --sh: 0 1px 2px rgba(35,28,20,.03), 0 26px 48px -38px rgba(35,28,20,.15); --tb: rgba(250,247,242,.86); --p: #2F6B48; --n: #B4472F; --bl: #3C5A82; --gb: #E7F0EA; --rb: #F6E3DE; --bb: #E7EDF6; --db: #FBF0EC; --dl: #F0D9D1; --ds: #8F3A28; --df: #8A6A62; --ac-soft: color-mix(in srgb, var(--ac) 12%, var(--s)); --ac-soft2: color-mix(in srgb, var(--ac) 20%, var(--s)); --ac-border: color-mix(in srgb, var(--ac) 32%, var(--s)); --radius: 16px; --radius-sm: 10px; --font: 'Sarabun', sans-serif; --font-brand: 'Playfair Display', serif; --font-mono: 'IBM Plex Mono', monospace; --ms: 'Material Symbols Rounded'; } [data-theme="dark"] { --b: #16130E; --s: #1F1B15; --s2: #28231B; --i: #F1EBDF; --i2: #BBB3A4; --i3: #948C7E; --i4: #837B6E; --i5: #6F685B; --l: #342F25; --l2: #2A251D; --bt: #EADFCB; --bi: #221E16; --bh: #DDD0B8; --sh: 0 1px 2px rgba(0,0,0,.32), 0 24px 46px -34px rgba(0,0,0,.7); --tb: rgba(20,17,12,.82); --p: #63C08A; --n: #E28A72; --bl: #8FB3DE; --gb: #1E2E24; --rb: #3A241F; --bb: #22303F; --db: #2E1C18; --dl: #4A2A22; --ds: #E8A594; --df: #C09A8E; --ac-soft: color-mix(in srgb, var(--ac) 22%, #241F18); --ac-soft2: color-mix(in srgb, var(--ac) 32%, #241F18); --ac-border: color-mix(in srgb, var(--ac) 44%, #241F18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--b); color: var(--i); font-family: var(--font); font-size: 14px; transition: background .25s, color .25s; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(151,138,116,.38); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(151,138,116,.6); } h1, h2, h3 { color: var(--i); font-weight: 600; margin: 0; } a { color: var(--ac); } .brand { font-family: var(--font-brand); letter-spacing: .16em; } .mono { font-family: var(--font-mono); } .muted { color: var(--i4); } .small { font-size: 12px; } .ms { font-family: var(--ms); font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400; } /* ── ชั้นขัดเกลา: ความคมระดับตัวอักษร/ระบบ ── */ :root { --ease: cubic-bezier(.22,.61,.36,1); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--ac) 30%, transparent); } :focus-visible { outline: 2px solid var(--ac-border); outline-offset: 2px; border-radius: 4px; } .field:focus-visible, button:focus-visible { outline-offset: 0; } ::-webkit-scrollbar { width: 8px; height: 8px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }