/* * 本心 Tathata Child Theme — 品牌 CSS 設計系統 * * 包含： * 1. 淺色模式 CSS 自訂屬性（:root） * 2. 深色模式覆寫（[data-theme="dark"]） * 3. 系統自動深色模式 fallback（@media prefers-color-scheme） * 4. 全域過渡動畫 * 5. Google Fonts 載入 * * @version 1.0.0 */ /* ──────────────────────────────────────── Google Fonts ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500&family=Noto+Sans+TC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap'); /* ──────────────────────────────────────── 淺色模式 Design Tokens ──────────────────────────────────────── */ :root { /* 主色系 */ --tathata-primary: #8C7558; --tathata-primary-dk: #6B4F32; --tathata-primary-lt: #C4A882; --tathata-accent: #B89B6E; /* 背景系 */ --tathata-bg: #F7F3EC; --tathata-bg-warm: #EDE4D3; --tathata-bg-deep: #DDD0BB; --tathata-surface: #FDFAF5; /* 文字系 */ --tathata-text: #2A1F14; --tathata-text-mid: #5C4A35; --tathata-text-muted: #9E8870; --tathata-text-light: #C4B4A0; /* 功能色 */ --tathata-success: #7A9E7E; --tathata-warning: #C4955A; --tathata-error: #B5665E; /* 字型 */ --tathata-font-serif: 'Noto Serif TC', 'Georgia', serif; --tathata-font-sans: 'Noto Sans TC', sans-serif; --tathata-font-display: 'Cormorant Garamond', serif; /* 間距（與品牌指南對應） */ --tathata-space-1: 0.25rem; --tathata-space-2: 0.5rem; --tathata-space-3: 0.75rem; --tathata-space-4: 1rem; --tathata-space-6: 1.5rem; --tathata-space-8: 2rem; --tathata-space-12: 3rem; --tathata-space-16: 4rem; /* 圓角 */ --tathata-radius-sm: 2px; --tathata-radius-md: 6px; --tathata-radius-lg: 12px; --tathata-radius-full: 999px; /* 陰影 */ --tathata-shadow-sm: 0 1px 4px rgba(42, 31, 20, 0.06); --tathata-shadow-md: 0 4px 20px rgba(42, 31, 20, 0.10); --tathata-shadow-lg: 0 12px 48px rgba(42, 31, 20, 0.14); /* 過渡動畫 */ --tathata-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tathata-duration-fast: 150ms; --tathata-duration-base: 300ms; --tathata-duration-slow: 600ms; } /* ──────────────────────────────────────── 深色模式 Tokens 意象：月光下的靜謐空間 觸發： ──────────────────────────────────────── */ [data-theme="dark"] { /* 主色系（月光版，提亮一階） */ --tathata-primary: #C4A882; --tathata-primary-dk: #8C7558; --tathata-primary-lt: #D8C4A2; --tathata-accent: #D4A870; /* 背景系（深夜暖黑系列，非純黑） */ --tathata-bg: #18120C; --tathata-bg-warm: #221A11; --tathata-bg-deep: #2E2418; --tathata-surface: #1E160F; /* 文字系（暖米白系列） */ --tathata-text: #EDE4D3; --tathata-text-mid: #C4B49A; --tathata-text-muted: #8A7862; --tathata-text-light: #5A4838; /* 功能色（降低飽和度） */ --tathata-success: #6A8E6E; --tathata-warning: #B4854A; --tathata-error: #A5564E; /* 陰影（加深） */ --tathata-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --tathata-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); --tathata-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55); } /* ──────────────────────────────────────── 系統深色模式自動套用（未手動切換時） ──────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tathata-primary: #C4A882; --tathata-primary-dk: #8C7558; --tathata-primary-lt: #D8C4A2; --tathata-accent: #D4A870; --tathata-bg: #18120C; --tathata-bg-warm: #221A11; --tathata-bg-deep: #2E2418; --tathata-surface: #1E160F; --tathata-text: #EDE4D3; --tathata-text-mid: #C4B49A; --tathata-text-muted: #8A7862; --tathata-text-light: #5A4838; --tathata-success: #6A8E6E; --tathata-warning: #B4854A; --tathata-error: #A5564E; --tathata-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --tathata-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); --tathata-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55); } } /* ──────────────────────────────────────── 全域過渡（主題切換時的平滑動畫） 注意：不使用 * 通用選擇器以避免效能問題 ──────────────────────────────────────── */ body, .tathata-transition-target { transition: background-color var(--tathata-duration-base) var(--tathata-ease), color var(--tathata-duration-base) var(--tathata-ease), border-color var(--tathata-duration-base) var(--tathata-ease); } /* ──────────────────────────────────────── 輔助 utility class（供 template 使用） ──────────────────────────────────────── */ .tathata-font-serif { font-family: var(--tathata-font-serif); } .tathata-font-sans { font-family: var(--tathata-font-sans); } .tathata-font-display{ font-family: var(--tathata-font-display); } .tathata-color-primary { color: var(--tathata-primary); } .tathata-color-text { color: var(--tathata-text); } .tathata-color-text-mid { color: var(--tathata-text-mid); } .tathata-bg-surface { background: var(--tathata-surface); } .tathata-bg-warm { background: var(--tathata-bg-warm); }