/* ============================================================= Design tokens — "The Face Issue" editorial system Mirrors lib/config/theme_config.dart where a value has an App counterpart, then shifts it for print/paper contrast. ============================================================= */ :root { /* ---- Paper & ink -------------------------------------- */ --paper: #f6f3ec; /* warm newsprint, page ground */ --paper-2: #efeae0; /* recessed panel */ --paper-3: #e7e1d5; /* deepest panel / contact sheet bed */ --card: #fffdf9; /* raised card */ --ink: #16151a; /* headline / body */ --ink-2: #4b4854; /* secondary copy */ --ink-3: #8b8794; /* captions, meta, folio */ --rule: rgba(22, 21, 26, 0.16); --rule-soft: rgba(22, 21, 26, 0.08); /* ---- Accents (App brand, weighted for paper) ----------- */ --indigo: #5b4ef0; /* App primary #6C63FF, deepened */ --indigo-deep: #3a2fc4; /* App primaryDark #5548E5 */ --indigo-wash: #eceafe; --blush: #d94a6c; /* App accent #FF6584, deepened */ --blush-wash: #fceef1; /* ---- Type --------------------------------------------- */ --display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif; --text: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cjk: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif; --fs-hero: clamp(3.25rem, 11.5vw, 8.75rem); --fs-display: clamp(2.25rem, 5.4vw, 4rem); --fs-title: clamp(1.5rem, 2.6vw, 2.125rem); --fs-lead: clamp(1.0625rem, 1.45vw, 1.3125rem); --fs-body: 1.0625rem; --fs-small: 0.875rem; --fs-kicker: 0.6875rem; --lh-tight: 0.92; --lh-title: 1.12; --lh-body: 1.65; --track-kicker: 0.2em; --track-tight: -0.03em; /* ---- Space & metrics ---------------------------------- */ --page: 1360px; --gutter: clamp(1.25rem, 4.5vw, 4.5rem); --s-1: 0.375rem; --s-2: 0.75rem; --s-3: 1.25rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; --s-8: 10rem; --r-sm: 3px; --r-md: 6px; --r-pill: 999px; --shadow-card: 0 1px 2px rgba(22, 21, 26, 0.05), 0 18px 40px -24px rgba(22, 21, 26, 0.35); --shadow-lift: 0 2px 6px rgba(22, 21, 26, 0.07), 0 30px 60px -30px rgba(22, 21, 26, 0.45); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; } /* Dark reading mode — opt-in via [data-theme="dark"] on . Same tokens, inverted ground; every component follows for free. */ [data-theme="dark"] { --paper: #131217; --paper-2: #1a1922; --paper-3: #21202a; --card: #1c1b24; --ink: #f4f1ea; --ink-2: #b4b0bd; --ink-3: #817d8c; --rule: rgba(244, 241, 234, 0.18); --rule-soft: rgba(244, 241, 234, 0.09); --indigo: #9b90ff; --indigo-deep: #b9b1ff; --indigo-wash: #23204a; --blush: #ff8ba6; --blush-wash: #3a2028; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }