/* ========================================================================== CHESS BIBLE — Design Tokens Premium literary "study" feel: a beautifully bound reference book. ========================================================================== */ :root { /* ---- Type families ---- */ /* Serif for headings — distinctive, literary. Sans for body — highly legible, full Vietnamese diacritic support (both stacks below are chosen for broad diacritic coverage). */ --font-serif: "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif; --font-sans: "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- Type scale (mobile-first, fluid via clamp) ---- */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-md: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); --text-lg: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem); --text-xl: clamp(1.75rem, 1.6rem + 0.7vw, 2.25rem); --text-2xl: clamp(2.25rem, 2rem + 1.2vw, 3rem); --leading-tight: 1.2; --leading-snug: 1.4; --leading-relaxed: 1.75; /* generous line-height for long reading */ --leading-loose: 1.9; /* ---- Spacing scale (8px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Comfortable reading width ---- */ --measure: 68ch; --measure-narrow: 48ch; /* ---- Touch targets ---- */ --tap-min: 44px; /* ---- Radii & elevation ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 12px 32px rgba(0,0,0,0.18); /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 220ms; /* ---- Base neutral palette (light mode) ---- */ --color-bg: #faf7f2; /* warm paper */ --color-bg-elevated: #ffffff; --color-bg-sunken: #f0ebe2; --color-ink: #201c16; /* near-black warm ink */ --color-ink-muted: #5c5548; --color-ink-faint: #948c7c; --color-border: #e2dac9; --color-border-strong: #c9bda4; --color-link: #7a3b1e; --color-focus: #b5651d; /* ---- Shared accent (used pre game-selection, e.g. shell chrome) ---- */ --color-accent: #8a6d3b; --color-accent-ink: #ffffff; /* ---- Xiangqi accent: warmer red / gold ---- */ --xq-accent: #a3271f; --xq-accent-strong: #7e1e18; --xq-gold: #c08a2e; --xq-bg-tint: #fbf1ea; /* ---- Western chess accent: cooler ivory / walnut / green ---- */ --wc-accent: #3f5b47; --wc-accent-strong: #2c4132; --wc-walnut: #5b3a29; --wc-bg-tint: #f0f2ec; /* ---- Semantic ---- */ --color-success: #3f7d4f; --color-warning: #b5651d; --color-danger: #a3271f; } /* ---- Dark mode: a lot of reading happens at night ---- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } [data-theme="dark"], :root[data-theme="dark"] { color-scheme: dark; --color-bg: #16140f; --color-bg-elevated: #201d17; --color-bg-sunken: #100e0a; --color-ink: #f0ebe0; --color-ink-muted: #b8ae9a; --color-ink-faint: #7d7361; --color-border: #322c22; --color-border-strong: #453d2f; --color-link: #e0a672; --color-focus: #e0a672; --color-accent: #c9a35a; --color-accent-ink: #16140f; --xq-accent: #d4645a; --xq-accent-strong: #e08880; --xq-gold: #d9ab5c; --xq-bg-tint: #241713; --wc-accent: #7ea787; --wc-accent-strong: #9cc0a3; --wc-walnut: #a3775c; --wc-bg-tint: #171c17; } /* ---- Per-game theme hooks: applied on ---- */ [data-game="xiangqi"] { --game-accent: var(--xq-accent); --game-accent-strong: var(--xq-accent-strong); --game-bg-tint: var(--xq-bg-tint); --game-gold: var(--xq-gold); } [data-game="western"] { --game-accent: var(--wc-accent); --game-accent-strong: var(--wc-accent-strong); --game-bg-tint: var(--wc-bg-tint); --game-gold: var(--wc-walnut); } :root, body:not([data-game]) { --game-accent: var(--color-accent); --game-accent-strong: var(--color-accent); --game-bg-tint: var(--color-bg-sunken); --game-gold: var(--color-accent); }