/* * ============================================================ * 鏡 Mirror — Design Tokens * Single source of truth for all visual constants. * ============================================================ * * USAGE * ----- * App: * (load BEFORE styles.css so overrides cascade correctly) * * Marketing tools (3_內容行銷/4_製作工具): * Use the standalone copy tokens.css in that folder. * * JS: getComputedStyle(document.documentElement) * .getPropertyValue('--accent-gold') * Never hardcode hex values in JS. * * DARK THEME * ---------- * Add class "dark-theme" to to activate dark palette. * All semantic colour variables swap automatically. * * Last updated: 2026-06-16 * ============================================================ */ /* ═══════════════════════════════════════════════════════════ 1. COLOURS — Light theme (default) ═══════════════════════════════════════════════════════════ */ :root { /* --- 使用者文字大小（設定 → 文字大小小/中/大）------------- */ /* 全站每一處 font-size 都寫成 calc(原值 * var(--user-font-scale))， applySettings() 只改這一個數字，整個 App 的字就一起變。這裡一定要有預設值 1：calc() 裡的變數若沒定義，整條宣告會失效，字級會退回繼承值，畫面會壞掉。 */ --user-font-scale: 1; /* --- 由 JS 量出來的浮動元件高度（見 settings.js syncLayoutMetrics）--- */ /* 底部導覽列與輸入列都是 position:fixed，字放大時它們自己也會變高。版面的留白改成吃這兩個變數，就不會出現「按鈕被擋住」。 */ --nav-h: 52px; --input-h: 120px; /* --- brand hue (HSL base) -------------------------------- */ --hue: 32; /* --- backgrounds ----------------------------------------- */ --bg-cream: #f5f0e6; --bg-warm: #efe8dc; --surface-paper: #fbf7ef; --surface-paper-deep: #ebe1d0; /* --- foregrounds ----------------------------------------- */ --text-primary: #3a3530; --text-secondary: rgba(58, 53, 48, 0.6); --text-hint: rgba(58, 53, 48, 0.4); /* --- accent / gold --------------------------------------- */ --accent-gold: #c8a87c; --accent-gold-dim: #b89860; --accent-gold-light: rgba(200, 168, 124, 0.3); /* --- borders --------------------------------------------- */ --border-warm: rgba(160, 130, 90, 0.15); /* --- atmospheric / decorative ---------------------------- */ --candle-warm: rgba(212, 165, 116, 0.9); --whisper: rgba(160, 140, 110, 0.6); --paper-soft: rgba(58, 53, 48, 0.85); --paper-mute: rgba(58, 53, 48, 0.5); --story-ink: #2a2520; --story-muted: rgba(90, 72, 48, 0.62); --accent-sage: #718079; /* --- selection ------------------------------------------- */ --selection-bg: rgba(200, 168, 124, 0.25); /* --- focus ring ------------------------------------------ */ --focus-ring: rgba(200, 168, 124, 0.5); --focus-ring-subtle: rgba(200, 168, 124, 0.4); /* --- semantic status (used in tools / dashboards) -------- */ --color-success: #4a7c59; --color-danger: #a05050; --color-white: #ffffff; /* --- marketing-tool aliases ------------------------------ */ --text-sub: #8a7e6e; --gold-dark: #b89a6e; /* ═══════════════════════════════════════════════════════════ 2. TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ /* --- font stacks ----------------------------------------- */ --font-serif: 'Klee One', Georgia, 'Noto Serif TC', serif; --font-sans: 'Noto Sans TC', 'PingFang TC', sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; /* --- body defaults --------------------------------------- */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* --- type scale (major-third ~1.25) ---------------------- */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 42px; --text-4xl: 56px; /* --- line heights ---------------------------------------- */ --leading-tight: 1.4; --leading-normal: 1.8; --leading-relaxed: 2.0; --leading-loose: 2.2; --leading-ultra: 2.4; /* --- letter spacing -------------------------------------- */ --tracking-tight: 0.02em; --tracking-normal: 0.05em; --tracking-wide: 0.15em; --tracking-wider: 0.2em; --tracking-widest: 0.3em; --tracking-ultra: 0.4em; --tracking-extreme: 0.5em; /* ═══════════════════════════════════════════════════════════ 3. SPACING SCALE (4px base) ═══════════════════════════════════════════════════════════ */ --space-1: 4px; /* 4 */ --space-2: 8px; /* 8 */ --space-3: 12px; /* 12 */ --space-4: 16px; /* 16 */ --space-5: 20px; /* 20 */ --space-6: 24px; /* 24 */ --space-7: 28px; /* 28 */ --space-8: 32px; /* 32 */ --space-10: 40px; /* 40 */ --space-12: 48px; /* 48 */ --space-14: 56px; /* 56 */ --space-16: 64px; /* 64 */ --space-20: 80px; /* 80 */ /* ═══════════════════════════════════════════════════════════ 4. BORDER RADIUS ═══════════════════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 20px; --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════ 5. SHADOWS ═══════════════════════════════════════════════════════════ */ --shadow-glow-sm: 0 0 12px rgba(212, 165, 116, 0.10); --shadow-glow-md: 0 0 20px rgba(212, 165, 116, 0.10); --shadow-glow-lg: 0 0 24px rgba(212, 165, 116, 0.12); --shadow-glow-xl: 0 0 60px rgba(200, 168, 124, 0.12), 0 0 120px rgba(200, 168, 124, 0.06); --shadow-soft: 0 2px 40px rgba(160, 130, 90, 0.08); --shadow-paper: 0 18px 52px rgba(75, 53, 28, 0.20), 0 3px 10px rgba(75, 53, 28, 0.10); /* ═══════════════════════════════════════════════════════════ 6. TRANSITIONS & EASING ═══════════════════════════════════════════════════════════ */ --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-decel: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --duration-fast: 0.2s; --duration-normal: 0.4s; --duration-slow: 0.8s; --duration-slower: 1.2s; --duration-ambient: 4s; /* ═══════════════════════════════════════════════════════════ 7. Z-INDEX SCALE ═══════════════════════════════════════════════════════════ Centralised layers prevent z-index wars. ═══════════════════════════════════════════════════════════ */ --z-dust: 2; --z-room: 10; --z-panel: 50; --z-veil: 80; --z-transition: 90; --z-splash: 200; --z-overlay: 900; --z-overlay-close: 901; --z-reader: 910; --z-reader-close: 911; --z-modal: 950; --z-modal-content: 955; --z-modal-overlay: 960; --z-toast: 999; } /* ═══════════════════════════════════════════════════════════ 8. COLOURS — Dark theme ═══════════════════════════════════════════════════════════ Activated by adding class "dark-theme" to . Only semantic colour tokens change; spacing / type / radii remain identical. ═══════════════════════════════════════════════════════════ */ body.dark-theme, .dark-theme { --bg-cream: #1a1816; --bg-warm: #1e1c19; --text-primary: #e8e0d4; --text-secondary: rgba(232, 224, 212, 0.6); --text-hint: rgba(232, 224, 212, 0.4); --accent-gold: #d4b896; --accent-gold-dim: #c8a87c; --accent-gold-light: rgba(212, 184, 150, 0.3); --border-warm: rgba(200, 168, 124, 0.2); --candle-warm: rgba(232, 200, 150, 0.9); --whisper: rgba(200, 180, 150, 0.6); --paper-soft: rgba(232, 224, 212, 0.85); --paper-mute: rgba(232, 224, 212, 0.5); --selection-bg: rgba(212, 184, 150, 0.25); --focus-ring: rgba(212, 184, 150, 0.5); --focus-ring-subtle: rgba(212, 184, 150, 0.4); --text-sub: rgba(232, 224, 212, 0.5); --gold-dark: #c8a87c; --shadow-glow-sm: 0 0 12px rgba(212, 165, 116, 0.14); --shadow-glow-md: 0 0 20px rgba(212, 165, 116, 0.14); --shadow-glow-lg: 0 0 24px rgba(212, 165, 116, 0.16); --shadow-glow-xl: 0 0 60px rgba(200, 168, 124, 0.15), 0 0 120px rgba(200, 168, 124, 0.08); --shadow-soft: 0 2px 40px rgba(160, 130, 90, 0.12); }