/* ========================================================================= * theme.css — 6-theme design-token system + Thai typography * Source of truth: docs/UI-BRIEF.md §2 (11 tokens × 6 themes) and the approved * reference design/member-page.html. Do NOT hard-code colours outside these * tokens — switching theme = changing one `data-theme` value on . * * Loaded AFTER app.css in base_v2.html. This file intentionally does NOT set * body background/color, so existing (light "premium") pages keep their look; * the dark themed surface is opt-in via `.theme-surface`. The upcoming * /member redesign will apply tokens directly. * * Token meanings (UI-BRIEF §2): * --bg0 page bg (darkest) · --bg1 card/panel · --bg2 raised surface * --g1 lightest metal highlight · --g2 mid metal accent · --g3 deep metal * --g4 bright metal (active / earned) · --cream primary text · --muted * secondary text · --line borders/dividers · --glow glow/shadow colour * ========================================================================= */ /* ---- Typography tokens (theme-independent) ------------------------------ */ :root { --font-head: 'Kanit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif; --font-body: 'Sarabun', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif; } /* ---- Default theme: gold "ล่าสมบัติทอง" (UI-BRIEF §2.1) ------------------ */ /* On :root so the system has a valid default even with no data-theme set. */ :root, :root[data-theme="gold"] { --bg0:#0d0805; --bg1:#1a0f08; --bg2:#241710; --g1:#f8edc0; --g2:#e0b24c; --g3:#9c6f23; --g4:#f3d27a; --cream:#f3e9d6; --muted:#a99577; --line:rgba(224,178,76,.22); --glow:rgba(224,178,76,.5); } /* ---- cream "ครีม" — warm light cream-gold (UI-BRIEF §2.2) --------------- */ /* Light theme: --bg0 is the light surface, --cream is dark text (inverted */ /* role vs the dark themes). All text/bg pairs verified WCAG AA. */ :root[data-theme="cream"] { --bg0:#f4e8ce; --bg1:#fcf4e3; --bg2:#ecdcbb; --g1:#fffaf0; --g2:#d9a441; --g3:#885a12; --g4:#875610; --cream:#3a2a14; --muted:#6d5a36; --line:rgba(154,106,30,.30); --glow:rgba(217,164,65,.40); } /* ---- rose "โรสโกลด์" (UI-BRIEF §2.3) ----------------------------------- */ :root[data-theme="rose"] { --bg0:#120808; --bg1:#200f0d; --bg2:#2e1814; --g1:#f9ddd2; --g2:#e0a489; --g3:#b56f54; --g4:#f3c4a6; --cream:#f3e4da; --muted:#b08977; --line:rgba(224,160,140,.22); --glow:rgba(224,160,140,.5); } /* ---- rose-pastel "ชมพูพาสเทล" — soft pastel pink (UI-BRIEF §2.4) -------- */ /* Light theme (same inverted role as cream). All pairs verified WCAG AA. */ :root[data-theme="rosepastel"] { --bg0:#fbeaf0; --bg1:#fff4f8; --bg2:#f4d9e2; --g1:#fff0f5; --g2:#e58aa6; --g3:#b0506b; --g4:#9c3a59; --cream:#3c2530; --muted:#76505b; --line:rgba(176,80,107,.28); --glow:rgba(229,138,166,.40); } /* ---- forest "มรกตป่าลึก" (UI-BRIEF §2.5) ------------------------------- */ :root[data-theme="forest"] { --bg0:#06100a; --bg1:#0b1a11; --bg2:#12291b; --g1:#f7ecc4; --g2:#d4b25a; --g3:#8a6b28; --g4:#f0d889; --cream:#e8efe6; --muted:#8fa48c; --line:rgba(212,178,90,.22); --glow:rgba(212,178,90,.45); } /* ---- night "ม่วงราตรี" (UI-BRIEF §2.6) --------------------------------- */ :root[data-theme="night"] { --bg0:#0c0814; --bg1:#160f22; --bg2:#221634; --g1:#f7ecc4; --g2:#d8b75e; --g3:#8a6b28; --g4:#f0d889; --cream:#efe9f5; --muted:#a294b5; --line:rgba(216,183,94,.22); --glow:rgba(216,183,94,.45); } /* ---- Central typography -------------------------------------------------- */ /* Body font only (no colour/background change) — keeps existing pages intact */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .font-head { font-family: var(--font-head); } .font-body { font-family: var(--font-body); } /* ---- Opt-in themed surface (for the upcoming /member redesign) ----------- */ /* Apply to a wrapper to paint it with the active theme's tokens. Existing */ /* pages do not use this class, so they are unaffected. */ .theme-surface { background: var(--bg0); color: var(--cream); color-scheme: dark; } .theme-surface a { color: var(--g4); } .theme-surface ::selection { background: var(--glow); color: var(--bg0); }