/* ============================================================================ tokens.css — a small, honest design vocabulary ---------------------------------------------------------------------------- Six roles do almost all the work. Name the ROLE, not the pixel. Everything else in a project should reference these — never a raw hex in a component. The one habit worth keeping: pick ONE accent and mean it. If you name it after its hue in your own project (--coral, --gold, --cyan), alias it back to --accent so swaps stay one line. Defaults below are a warm carbon with a wine cast. Fork it: change --accent first, then --bg. That is usually the whole rebrand. One thing most kits get wrong: an accent that reads well on a dark ground is usually too light for a light one. Light mode gets its OWN --accent below — same hue, darker value. Both clear WCAG AA (4.5:1) on ground AND surface. ========================================================================== */ /* ============================================================================ THAI TYPE — the part every AI-generated stylesheet gets wrong ---------------------------------------------------------------------------- Latin stays on system fonts (zero download). Thai CANNOT: no OS ships a Thai face that matches a Palatino-class serif, so Thai silently falls back to whatever the machine has and the whole page loses its voice. Fix: declare the Thai faces over the THAI UNICODE RANGE ONLY. Latin glyphs never match these blocks, so they fall through to the system stack below. The browser switches per glyph. ~43 KB total, Thai readers only. Pairing (deliberate, not accidental): serif display + looped sans body. · Trirong — Thai serif, companion to the Latin Palatino · IBM Plex Sans Thai Looped — looped body face; looped reads faster in paragraphs than loopless (Typotheque, 2025) Both SIL OFL 1.1 — see fonts/LICENSE-*.txt. The CC0 grant covers code and styles in this repo, NOT the bundled fonts. ========================================================================== */ @font-face { font-family: "Starter Serif TH"; src: url("fonts/trirong-500-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Starter Sans TH"; src: url("fonts/plex-thai-looped-400-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Starter Sans TH"; src: url("fonts/plex-thai-looped-600-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---- the six roles -------------------------------------------------- */ --bg: #181114; /* ground. warm, never pure #000 */ --ink: #f0e6e9; /* primary text. warm, never #fff */ --accent: #e05a72; /* the one accent. state + emphasis */ --surface: #241b1f; /* raised card / panel on the ground*/ --line: rgb(240 230 233 / 12%); /* hairline / divider */ --muted: #a89299; /* dimmed voice: captions, meta */ /* ---- supporting neutrals (derived from the six) --------------------- */ --bg-2: #1f171b; /* a second, slightly-raised ground */ --surface-2: #2d2229; /* hover / nested surface */ --line-2: rgb(240 230 233 / 22%); /* stronger divider, chip borders */ --faint: #7a6870; /* faintest text: timestamps, hints */ --accent-soft: rgb(224 90 114 / 14%); /* accent wash: selected bg, focus */ /* ---- type: a display serif + a tracked mono eyebrow + system sans ---- Thai face FIRST (it only claims the Thai range), Latin system fonts after, and every stack ENDS with a Thai-capable fallback so a missing woff2 still renders Thai instead of tofu. iOS/macOS ship Thonburi + Sukhumvit Set; Android ships Noto Sans Thai. Never end a stack at plain `sans-serif`. */ --font-display: "Starter Serif TH","Iowan Old Style","Palatino Linotype", Palatino,Georgia,"Times New Roman","Noto Serif Thai",serif; /* Thai first even here: Thai has no monospace tradition, and leaving it out means every Thai word inside a label/eyebrow silently picks a THIRD face. */ --font-mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas, "Liberation Mono","Starter Sans TH","Noto Sans Thai",monospace; --font-ui: "Starter Sans TH",system-ui,-apple-system,"Segoe UI",Roboto, Helvetica,Arial,"Noto Sans Thai","Sukhumvit Set",Thonburi, sans-serif; /* ---- line-height: set once, derive everything ---------------------- Thai stacks up to four glyphs vertically (consonant + upper vowel + tone mark + lower vowel). Latin-tuned leading clips the tone marks off น้ำ and ที่. Body never below 1.55; headings never below 1.2. */ --lh-display: 1.2; --lh-heading: 1.3; --lh-body: 1.7; /* eyebrows/labels: mono, uppercase, tracked-out. LATIN ONLY — see below. */ --eyebrow-size: 12px; --eyebrow-track: 0.16em; /* ---- motion: one house curve, used sparingly ------------------------ */ --ease: cubic-bezier(.2,.6,.2,1); --dur: .32s; /* ---- shape ---------------------------------------------------------- */ --radius: 12px; --radius-sm: 8px; --space: clamp(16px, 3vw, 28px); } /* Light ground. Same roles, inverted values. Auto by system preference, or force with . */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f7f1f2; --ink: #241b1e; /* Light needs its OWN accent. The dark rose scores 2.9 on a light ground — same hue, darker value, so links stay legible instead of "decorative". */ --accent: #b8304a; --surface: #fdf9fa; --line: rgb(36 27 30 / 14%); --muted: #6e5f64; --bg-2: #f0e8ea; --surface-2: #fffdfd; --line-2: rgb(36 27 30 / 24%); --faint: #8f7d83; --accent-soft: rgb(184 48 74 / 12%); } } :root[data-theme="light"] { --bg:#f7f1f2; --ink:#241b1e; --accent:#b8304a; --surface:#fdf9fa; --line:rgb(36 27 30 / 14%); --muted:#6e5f64; --bg-2:#f0e8ea; --surface-2:#fffdfd; --line-2:rgb(36 27 30 / 24%); --faint:#8f7d83; --accent-soft:rgb(184 48 74 / 12%); } /* ---- a few defaults so a blank page already speaks the vocabulary ----- */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); line-height: var(--lh-body); /* Thai has no spaces between words — let the browser's dictionary break it. `break-all` / `break-word` slice mid-syllable and produce nonsense. */ word-break: normal; overflow-wrap: normal; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; /* the shipped Thai serif is 500 — asking */ line-height: var(--lh-heading); /* for 600 makes the browser fake a bold */ letter-spacing: normal; /* tracking splits Thai combining marks */ } /* Optical tightening is a LATIN fix. Opt in by marking the run:

*/ :is(h1, h2, h3):lang(en) { letter-spacing: -.01em; } /* Uppercase + tracking are Latin typographic devices. Thai has no case, and tracking breaks it — so an eyebrow must be marked to earn them. Unmarked (i.e. Thai) eyebrows get neither. */ .eyebrow { font-family: var(--font-mono); font-size: var(--eyebrow-size); /* muted, NOT accent. An eyebrow sits on every card; painting it accent sprays the one accent across the whole page and it stops meaning "this is live". */ color: var(--muted); } .eyebrow:lang(en) { letter-spacing: var(--eyebrow-track); text-transform: uppercase; } /* The guardrail: nothing may track Thai, no matter what a component adds later. This is the single line that survives an agent "improving" your CSS. */ :lang(th) { letter-spacing: normal !important; } a { color: var(--accent); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } hr, .rule { border: 0; border-top: 1px solid var(--line); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================================ BANNED (these read as "generic AI output" — the vocabulary exists to avoid them) · gradient text · glassmorphism (blurred translucent panels) · a big centered hero metric · an Inter-only font stack · pure #000 background / #fff text · more than one accent hue competing BANNED, Thai edition (these read as "nobody checked the Thai") · letter-spacing on Thai · line-height under 1.55 on Thai body · word-break: break-all/break-word · a font stack with no Thai fallback · heading leading under 1.2 · looped/loopless mixed by accident Smoke test — render these and check nothing clips or splits: stacked marks : น้ำ ที่ ปั๊ม SARA AM : น้ำใจ ทำงาน long unspaced : การออกแบบตัวอักษรไทยสำหรับเว็บไซต์สมัยใหม่ ========================================================================== */