/* Design tokens — the single place a colour, a step of spacing or a type size * is decided. * * Loaded BEFORE site.css so existing rules keep winning: nothing here changes * how a page looks today. site.css still has its own :root block with names * that drifted from their meaning (--cream is a near-black ink, --wood-900 is * an ivory). Those stay until the components that use them are rebuilt, one at * a time, against the names below. Two vocabularies for a short while is the * price of not repainting 51 live pages in a single commit. * * Migration map, for when a rule is rewritten: * --cream, --ink → --color-ink * --wood-900 → --color-warm-white * --wood-750/700 → --color-stone * --gold, --gold-l → --color-teak (accent only — see the note on restraint) * --line/-2/-3 → --color-border * --maxw → --container-default * --ease → --motion-ease */ :root { /* ---- colour --------------------------------------------------------- * Warm white carries the page. Ink carries the words. Teak is an accent * and is not meant to cover large areas — a wall of orange-brown reads as * a timber yard, not as a furniture brand. */ --color-ink: #1e1c19; --color-charcoal: #302d28; --color-warm-white: #fbf9f5; --color-ivory: #f5f1e8; --color-stone: #d8d0c4; --color-teak: #9a623e; --color-teak-dark: #68402a; --color-bronze: #806447; --color-muted: #746e65; --color-border: rgba(30, 28, 25, 0.14); --color-border-strong: rgba(30, 28, 25, 0.24); --color-overlay: rgba(20, 17, 14, 0.42); /* States. Error must never be signalled by colour alone (WCAG 1.4.1) — * these pair with an icon and text wherever they are used. */ --color-error: #9a2b23; --color-error-bg: #fdf1f0; --color-success: #2f6b4a; --color-success-bg: #f0f6f2; /* ---- layout --------------------------------------------------------- */ --container-wide: 1440px; --container-default: 1280px; --container-reading: 740px; /* 68–75 characters at --text-body */ --radius-small: 4px; --radius-medium: 8px; --radius-large: 16px; --radius-pill: 999px; /* One shadow, used sparingly. Depth on every card is what makes a page * look like a template. */ --shadow-soft: 0 16px 40px rgba(28, 22, 17, 0.08); --shadow-lifted: 0 24px 60px rgba(28, 22, 17, 0.12); /* ---- spacing scale -------------------------------------------------- * Sections breathe with --space-7/8; components use 1–4. */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; /* ---- type ----------------------------------------------------------- * Two families, no more. Myanmar is listed in both stacks because a page * mixes scripts constantly — a Burmese phone number inside an English * sentence must not fall back to a font with no Myanmar glyphs, which is * what produces the dotted circles and stacked-vowel collisions. */ --font-serif: 'Noto Serif', 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', 'Noto Sans Myanmar', 'Padauk', serif; --font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans Myanmar', 'Padauk', system-ui, -apple-system, sans-serif; --text-hero: clamp(2.8rem, 7vw, 6.8rem); --text-section: clamp(2rem, 4vw, 4rem); --text-card: clamp(1.25rem, 2vw, 2rem); --text-body-lg: clamp(1.05rem, 1.3vw, 1.2rem); --text-body: 1rem; /* 16px floor — never smaller for body copy */ --text-small: 0.875rem; /* 14px floor — never smaller for anything */ --leading-hero: 0.96; --leading-section: 1.08; --leading-body: 1.75; /* Chinese and Burmese need more room than Latin: CJK has no descender * relief and Burmese stacks marks above and below the line. */ --leading-body-cjk: 1.9; --leading-body-my: 2.05; --tracking-hero: -0.035em; --tracking-eyebrow: 0.18em; /* ---- z-index -------------------------------------------------------- * A named ladder, so nothing is ever fixed by adding another 9999. */ --z-base: 0; --z-raised: 10; --z-sticky-header: 100; --z-bottom-nav: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* ---- motion --------------------------------------------------------- * Short and few. Everything that moves is opt-in behind * prefers-reduced-motion: no-preference. */ --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; /* ---- focus ---------------------------------------------------------- * Visible on both the warm-white page and over a dark photograph. */ --focus-ring: 2px solid var(--color-teak); --focus-offset: 3px; /* ---- touch ---------------------------------------------------------- * WCAG 2.2 target size. Buttons and nav items inherit this as min-height. */ --tap-min: 44px; } /* Breakpoints cannot be custom properties in a media query, so they live here * as the documented set. Keep these numbers and the ones in @media in step. * sm 480px · phone landscape * md 768px · tablet portrait * lg 1024px · tablet landscape / small laptop * xl 1280px · desktop * 2xl 1440px · wide desktop */ /* Per-language line height. site_head() already sets , so this * needs no extra markup. */ :lang(zh) { --leading-body-current: var(--leading-body-cjk); } :lang(my) { --leading-body-current: var(--leading-body-my); } :root { --leading-body-current: var(--leading-body); } /* Smooth scrolling is a preference, not a default. site.css sets it * unconditionally on html; this turns it off for anyone who has asked their * system for less motion, which that rule ignores. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }