/* ============================================================ 顧好家官網 — 設計系統 Token（單一真實來源） 方向 C：板岩深底 + 藍操作色 + 金點綴，綠退役。對齊 App Brand.guhao。 紀律見 hosting/CLAUDE.md。色階沿用 App lib/presentation/theme/tokens/primitives.dart。 用法：頁面 加 ， 然後刪除該頁自己的 :root 變量，改吃這裡的值。 ⚠️ 禁止在頁面散寫色碼，一律走 var(--color-…)。 ============================================================ */ :root { /* ---------- 1) 純色階（machine 層，勿在頁面直接用，給語意層引用）---------- */ /* 板岩灰（中性 + 深底），同 App slate 50~900 */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; /* 品牌藍（操作色），同 App blue/sky */ --blue-500: #3B82F6; --blue-700: #1D4ED8; --blue-800: #1E40AF; /* App Brand.guhao.primary */ --sky-500: #0EA5E9; /* logo 電藍 accent */ /* 金（高級點綴，收斂成一組；舊站 #C9A84C/#E8B85A/#DFC06A 統一）*/ --gold-500: #C9A84C; --gold-300: #DFC06A; --gold-700: #C8973A; /* 狀態色，同 App */ --emerald-500: #10B981; --amber-500: #F59E0B; --red-600: #DC2626; /* ---------- 2) 語意層（頁面用這層）---------- */ --color-ink: var(--slate-900); /* 深底 / 頁首 / 最深字 */ --color-bg: #FFFFFF; /* 主背景 */ --color-bg-alt: var(--slate-50); /* 區塊交錯底 */ --color-surface: #FFFFFF; /* 卡片面 */ --color-border: var(--slate-200); --color-text: var(--slate-800); /* 內文 */ --color-text-sub: var(--slate-500); /* 次要文字 */ --color-brand: var(--blue-800); /* 主操作色：按鈕 / 連結 / focus */ --color-brand-hover: var(--blue-700); --color-brand-accent: var(--sky-500); /* 強調 / icon */ --color-accent-gold: var(--gold-500); /* 高級點綴：分隔線、徽章、數字強調 */ --color-success: var(--emerald-500); --color-warning: var(--amber-500); --color-danger: var(--red-600); /* 陰影：染板岩色，不用純黑 */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 16px rgba(15,23,42,0.10); --shadow-lg: 0 12px 32px rgba(15,23,42,0.14); /* ---------- 3) 字體 ---------- */ --font-sans: 'Noto Sans TC', system-ui, -apple-system, sans-serif; /* 主力黑體 */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* 數字 / 標籤 */ --font-serif: 'Noto Serif TC', serif; /* 收斂備用，有理由才用 */ /* 字級階梯（rem） */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; /* ---------- 4) 間距（4 的倍數）---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ---------- 5) 圓角（鎖一套）---------- */ --radius-sm: 8px; --radius: 12px; --radius-pill: 999px; /* ---------- 6) 版面 ---------- */ --container-max: 1200px; /* ============================================================ 相容別名（讓既有頁面的 var(--xxx) 不會壞；P3 逐頁清掉後可移除） ============================================================ */ --serif: var(--font-serif); --sans: var(--font-sans); --mono: var(--font-mono); --navy: var(--slate-900); --gold: var(--gold-500); --radius: 12px; --text: var(--color-text); --text-sub: var(--color-text-sub); --bg: var(--color-bg); --surface: var(--color-surface); --border: var(--color-border); /* ⚠️ 綠系舊變量（--primary 墨綠/teal、--green）已退役，由各頁在 P3 重映到藍/板岩，不在此提供別名。 */ }