/* ============================================================ BeefSoup Web · Design Tokens (SSOT) 對應 BeefSoupV3/Resources/Styles/Colors.xaml + AppStyles.xaml 主題:Emerald Champagne 墨綠金 (唯一主題) ============================================================ */ :root { /* ====== 1. 主色:墨綠 Emerald ====== */ --beef-primary: #0F3D2E; --beef-primary-rgb: 15, 61, 46; --beef-primary-hover: #0A2E22; --beef-primary-pressed: #051E16; --beef-on-primary: #FFFFFF; --beef-primary-50: #F0F5F2; --beef-primary-100: #D5E5DC; --beef-primary-200: #A8C8B5; --beef-primary-300: #7CAA8E; --beef-primary-400: #4F8B67; --beef-primary-500: #2B6948; --beef-primary-600: #0F3D2E; --beef-primary-700: #0A2E22; --beef-primary-800: #051E16; --beef-primary-900: #02100B; /* ====== 2. 副色:香檳金 Champagne ====== */ --beef-secondary: #C8A85A; --beef-secondary-soft: #F5EBC8; --beef-secondary-border: #DFC476; --beef-tertiary: #92400E; --beef-accent-50: #FBF7EB; --beef-accent-100: #F5EBC8; --beef-accent-200: #EBD898; --beef-accent-300: #DFC476; --beef-accent-400: #D4B665; --beef-accent-500: #C8A85A; --beef-accent-600: #B0904B; --beef-accent-700: #917838; --beef-accent-800: #735E2A; --beef-accent-900: #4F4019; /* ====== 3. 表面 Surface ====== */ --beef-bg-base: #FAFAF9; --beef-bg-card: #FFFFFF; --beef-bg-chip: #F0F3F1; --beef-bg-track: #D9E2DC; --beef-border: rgba(15, 61, 46, 0.10); --beef-border-strong: rgba(15, 61, 46, 0.18); /* ====== 4. 文字 ====== */ --beef-text-high: #1C1917; --beef-text-mid: #3D3A36; --beef-text-low: #7A766F; --beef-text-on-dark: #FFFFFF; /* ====== 5. ID Badge (耳號) ====== */ --beef-id-bg: #D5E5DC; --beef-id-fg: #051E16; /* ====== A. 母豬主狀態 4 色 (ADR-004,bg 為墨綠香檳金主題 desaturated 版) ====== */ --beef-sow-mating-fg: #15803D; --beef-sow-mating-bg: #D9F0E0; --beef-sow-mated-fg: #0E7490; --beef-sow-mated-bg: #D0EBEE; --beef-sow-pregnant-fg: #B45309; --beef-sow-pregnant-bg: #F5EBC8; --beef-sow-nursing-fg: #9D174D; --beef-sow-nursing-bg: #F4E1ED; /* ====== B. 母豬待配種副狀態 5 色 ====== */ --beef-sub-gilt-new-fg: #64748B; --beef-sub-gilt-new-bg: #EEF2EE; --beef-sub-weaned-fg: #4338CA; --beef-sub-weaned-bg: #DEE5F3; --beef-sub-empty-pregnancy-fg: #C2410C; --beef-sub-empty-pregnancy-bg: #F5DEB8; --beef-sub-abortion-fg: #B91C1C; --beef-sub-abortion-bg: #F0D9D9; --beef-sub-cull-fg: #475569; --beef-sub-cull-bg: #CED5D0; /* ====== C. 公豬角色 4 色 (ADR-007) ====== */ --beef-boar-stud-fg: #1E40AF; --beef-boar-stud-bg: #DCE3EE; --beef-boar-teaser-fg: #0891B2; --beef-boar-teaser-bg: transparent; --beef-boar-other-fg: #475569; --beef-boar-other-bg: #DFE6E0; --beef-boar-pending-fg: #C2410C; --beef-boar-pending-bg: #F5DEB8; /* ====== D. 三色紅綠燈 ====== */ --beef-traffic-green-fg: #15803D; --beef-traffic-green-bg: #D9F0E0; --beef-traffic-amber-fg: #C2410C; --beef-traffic-amber-bg: #F5DEB8; --beef-traffic-red-fg: #B91C1C; --beef-traffic-red-bg: #F0D9D9; /* ====== E. 同步狀態 4 色 (Outbox) ====== */ --beef-sync-pending-fg: #9333EA; --beef-sync-pending-bg: #EDE2F3; --beef-sync-syncing-fg: #0369A1; --beef-sync-syncing-bg: #DCEAEC; --beef-sync-done-fg: #15803D; --beef-sync-done-bg: #D9F0E0; --beef-sync-conflict-fg: #B91C1C; --beef-sync-conflict-bg: #F0D9D9; /* ====== F. 藍牙連線 3 色 ====== */ --beef-bt-connected-fg: #0369A1; --beef-bt-connected-bg: #EAF1F1; --beef-bt-disconnected-fg: #94A3B8; --beef-bt-disconnected-bg: #EEF2EE; --beef-bt-reconnecting-fg: #C2410C; --beef-bt-reconnecting-bg: #F5DEB8; /* ====== 身分識別 (Pig.Sex,主豬綠/公豬墨黑家族,§14) ====== */ --beef-id-sow-fg: #051E16; --beef-id-sow-bg: #D5E5DC; --beef-id-gilt-fg: #0A2E22; --beef-id-gilt-bg: #A8C8B5; --beef-id-boar-fg: #1C1917; --beef-id-boar-bg: #E5E5E4; /* ====== 警示 ====== */ --beef-warn: #9333EA; --beef-warn-soft: #F3E8FF; --beef-danger: #B91C1C; --beef-danger-soft: #FEE2E2; --beef-offline: #F472B6; --beef-offline-banner-bg: rgba(213, 229, 220, 0.75); --beef-online-dot-green: #22C55E; /* ====== Material 3 Surface 五階 (色彩規範 §17.1) ====== */ --beef-m3-surface: #FAFAF9; --beef-m3-on-surface: #1C1917; --beef-m3-on-surface-variant: #3D3A36; --beef-m3-surface-container-lowest: #FFFFFF; --beef-m3-surface-container-low: #F6F8F7; --beef-m3-surface-container: #F0F3F1; --beef-m3-surface-container-high: #E8EDEA; --beef-m3-surface-container-highest: #DFE6E2; --beef-m3-inverse-surface: #1C1917; --beef-m3-inverse-on-surface: #FAFAF9; --beef-m3-outline: rgba(15, 61, 46, 0.30); --beef-m3-outline-variant: rgba(15, 61, 46, 0.12); /* ====== 字體 (Web 用系統字 / 可改 webfont) ====== */ --beef-font-sans: "Open Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --beef-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; /* ====== 字級 (對應 AppStyles BeefDisplay / H1 / H2 / Title / Body / Label / Caption / CaptionXS) ====== */ --beef-fs-display: 2.25rem; /* 36 */ --beef-fs-h1: 2rem; /* 32 */ --beef-fs-h2: 1.375rem; /* 22 */ --beef-fs-title: 1rem; /* 16 */ --beef-fs-body: 1rem; /* 16 */ --beef-fs-label: 0.875rem; /* 14 */ --beef-fs-caption: 0.875rem; /* 14 */ --beef-fs-caption-xs: 0.75rem; /* 12 */ /* ====== 圓角 ====== */ --beef-radius-sm: 8px; --beef-radius-md: 12px; --beef-radius-lg: 16px; --beef-radius-xl: 24px; --beef-radius-pill: 9999px; /* ====== 觸控熱區 ====== */ --beef-touch-md: 44px; --beef-touch-lg: 56px; --beef-touch-xl: 64px; /* ====== 陰影 (色彩規範 §8,墨綠 rgba 暖底,精品靜謐感) ====== */ --beef-shadow-warm-base: 15, 61, 46; /* #0F3D2E */ --beef-shadow-sm: 0 1px 2px rgba(15, 61, 46, 0.04), 0 1px 3px rgba(15, 61, 46, 0.06); --beef-shadow-md: 0 4px 8px rgba(15, 61, 46, 0.08), 0 1px 3px rgba(15, 61, 46, 0.06); --beef-shadow-lg: 0 8px 12px rgba(15, 61, 46, 0.10), 0 4px 6px rgba(15, 61, 46, 0.06); --beef-shadow-primary: 0 4px 12px rgba(15, 61, 46, 0.28); --beef-shadow-gold: 0 2px 8px rgba(200, 168, 90, 0.30); --beef-elev-1: 0 1px 3px rgba(var(--beef-shadow-warm-base), 0.06); --beef-elev-2: 0 2px 6px rgba(var(--beef-shadow-warm-base), 0.08); --beef-elev-3: 0 4px 8px rgba(var(--beef-shadow-warm-base), 0.10); --beef-elev-4: 0 6px 10px rgba(var(--beef-shadow-warm-base), 0.12); --beef-elev-5: 0 8px 12px rgba(var(--beef-shadow-warm-base), 0.14); }