/* LP — design tokens, v3 redesign (2026-07, "Mai" palette from the design handoff: paper/panel/ink/brick/ochre). Token NAMES follow the HelpRent donor so components only ever reference var(--*); the VALUES were remapped from the old clay/jade/sand palette as follows: --bg page paper #FBF6EC -> #FAF7EF --paper raised surface #FCF8F0 -> #FFFFFF (cards are white now) --sand tinted panel #F1E8D6 -> #F2ECDC (= handoff --panel) --ink text #241A12 -> #3A452F (green-ink) --clay accent #C65D42 -> #A8442E (brick, = handoff --acc) --jade 2nd accent #2C6B5E -> ink (active states are ink-filled) --chrome dark chrome #211710 -> #2A3323 (= handoff --ink-deep) New names added for the v3 components: --acc, --acc2, --panel, --ink-deep, --display, --shadow-card, --shadow-card-h. Loaded before site.css. */ :root { /* Surfaces ---------------------------------------------------- */ --bg: #FAF7EF; --paper: #FFFFFF; --sand: #F2ECDC; --card: #FFFFFF; /* Type / ink -------------------------------------------------- */ --ink: #3A452F; --ink2: #5C5A4F; --ink3: #7C7A6E; /* card small-text (/mo, VND, subs) — mockup grey, darker than --muted */ --muted: #8A8377; /* Lines ------------------------------------------------------- */ --line: #E2DDCB; --line2: #EDE7D5; /* Accents ------------------------------------------------------ */ --clay: #A8442E; --clay-d: #8F3826; --jade: #3A452F; --jade-d: #2A3323; /* Chrome (always dark: tabbar, chat head) ------------------------ */ --chrome: #2A3323; --on-chrome: #E8E3D5; --on-chrome-2: #B9BCAE; --on-dark: #FBF8EF; /* cream text on always-dark bands (footer, bbook, cityband) */ /* v3 aliases (handoff names, used by the redesigned sections) ---- */ --acc: var(--clay); --acc2: #C9972E; --panel: var(--sand); --ink-deep: #2A3323; /* Status -------------------------------------------------------- */ --ok: #5C8A5E; --warn: #D4A24C; --bad: #B5413B; /* Contact channels ---------------------------------------------- */ --wa: #25D366; --zalo: #0068FF; --tg: #229ED9; /* Type families -------------------------------------------------- */ --serif: 'Fraunces', Georgia, serif; --sans: 'Be Vietnam Pro', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --display: 'Bricolage Grotesque', 'Golos Text', var(--sans); /* Radii ----------------------------------------------------------- */ --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px; /* Shadows ---------------------------------------------------------- */ --shadow-s: 0 2px 8px rgba(58, 69, 47, .08); --shadow-m: 0 10px 24px -16px rgba(40, 40, 20, .42); --shadow-l: 0 14px 40px rgba(40, 40, 20, .22); --shadow-card: 0 1px 0 rgba(58, 69, 47, .14), 0 10px 30px -24px rgba(40, 40, 20, .4); --shadow-card-h: 0 30px 50px -24px rgba(40, 40, 20, .45); --focus: 0 0 0 4px rgba(168, 68, 46, .18); /* Motion ------------------------------------------------------------ */ --dur: 200ms; --ease: cubic-bezier(.2, .8, .2, 1); --ease3: cubic-bezier(.2, .7, .2, 1); /* Layout ------------------------------------------------------------ */ --maxw: 1120px; /* legacy prose/app pages */ --maxw-home: 1360px; /* v3 home content + chrome (nav/footer/bands) */ --maxw-cat: 1440px; /* catalog grid */ --pad-x: clamp(20px, 4vw, 56px); /* v3 side padding (home 56 / catalog 48) */ /* Legacy alias (analytics chart etc.) -------------------------------- */ --brand: var(--clay); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } } /* ============================================================================ Dark theme — opt-in via (set before first paint by the inline script in base.html, which also honors prefers-color-scheme). Only the ~20 palette tokens flip here; every component reads var(--*), so this one block is the whole dark look. Warm near-black to match the earthy brand. */ :root[data-theme="dark"] { --bg: #15170F; --paper: #1E2016; --sand: #24261A; --card: #1E2016; --ink: #ECE7D6; --ink2: #B7B3A4; --ink3: #969384; --muted: #89867A; --line: #34372A; --line2: #2B2E21; --clay: #D46A4F; --clay-d: #E4795D; --jade: #86A870; --jade-d: #6F9159; --chrome: #1B1D15; --ink-deep: #12140D; --acc2: #D8A63A; --ok: #6FA06F; --warn: #D9AB55; --bad: #D45B54; --shadow-s: 0 2px 8px rgba(0, 0, 0, .5); --shadow-m: 0 10px 24px -16px rgba(0, 0, 0, .6); --shadow-l: 0 14px 40px rgba(0, 0, 0, .6); --shadow-card: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 30px -22px rgba(0, 0, 0, .8); --shadow-card-h: 0 30px 55px -24px rgba(0, 0, 0, .85); --focus: 0 0 0 4px rgba(212, 106, 79, .32); } :root[data-theme="dark"] body { color-scheme: dark; }