/* ============================================================================ * 雙品牌設計 token（純 CSS 自訂屬性，無 Sass / Less / Tailwind） * * --iso-* iso2erp 半邊 — Odoo 紫 #714B67 * 來源：ISO2ERP UX 規格書 v2.0 §2 色彩、§3.1 字體、§3.3 間距、§4.1 斷點 * --mig-* ERP MIGRAI 半邊 — Cyodaa Teal #00A99D * 來源：CYODAA_DESIGN_SYSTEM.md §1 配色、§3 字體、§6 間距/圓角/陰影 * * 標 [衍生] 者為原始文件未定義、為了 token 表完整而補；規格補了正式值就以規格為準。 * ==========================================================================*/ :root { /* ── A. iso2erp（Odoo 紫）──────────────────────────────────────── */ /* A1 品牌（UX §2.1）*/ --iso-brand: #714B67; --iso-brand-soft: #8A6E80; --iso-brand-tint: #F8F4F7; /* A2 語義（UX §2.2，對比度皆 ≥ 4.5:1）*/ --iso-success-bg: #E8F5E9; --iso-success-fg: #2E7D32; --iso-warning-bg: #FFF8E1; --iso-warning-fg: #B8770A; --iso-danger-bg: #FFEBEE; --iso-danger-fg: #C62828; --iso-info-bg: #E3F2FD; --iso-info-fg: #1565C0; /* A3 AI 輔助標示（UX §2.2 + 附錄 D；PLAN §4.2 裁決：兩個半邊都用這組紫）*/ --iso-ai-bg: #F3E5F5; --iso-ai-fg: #6A1B9A; --iso-ai-border: #CE93D8; /* [衍生] */ /* A4 灰階與文字（UX §2.2）*/ --iso-surface: #FFFFFF; --iso-gray-100: #F5F5F5; --iso-gray-300: #E0E0E0; --iso-text: #333333; --iso-text-muted: #666666; --iso-text-disabled: #999999; --iso-border: #E0E0E0; /* A5 暗色 log 區（UX §7.2 戰情室；PLAN §4.2「暗底等寬字」）*/ --iso-dark-bg: #1A1A2E; --iso-dark-surface: #16213E; --iso-dark-text: #E8E8E8; --iso-dark-text-muted: #B0B0B0; --iso-dark-border: #2A3A5C; /* A6 字體（UX §3.2，fallback chain 原樣照抄）*/ --iso-font-sans: "Noto Sans TC", "Microsoft YaHei", "PingFang TC", "PingFang SC", "Helvetica Neue", Arial, "Noto Sans", sans-serif; --iso-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace; /* [衍生] */ /* A7 字級（UX §3.1）*/ --iso-fs-page-title: 24px; --iso-fw-page-title: 700; --iso-lh-page-title: 1.4; --iso-fs-module-title: 18px; --iso-fw-module-title: 500; --iso-lh-module-title: 1.5; --iso-fs-form-label: 14px; --iso-fw-form-label: 500; --iso-lh-form-label: 1.5; --iso-fs-form-body: 14px; --iso-fw-form-body: 400; --iso-lh-form-body: 1.5; --iso-fs-caption: 12px; --iso-fw-caption: 400; --iso-lh-caption: 1.5; --iso-fs-status-tag: 12px; --iso-fw-status-tag: 500; --iso-lh-status-tag: 1.4; --iso-fs-ai-label: 12px; --iso-fw-ai-label: 400; --iso-lh-ai-label: 1.4; /* A8 間距（UX §3.3，基準 4px）*/ --iso-space-1: 4px; --iso-space-2: 8px; --iso-space-3: 12px; --iso-space-4: 16px; --iso-space-6: 24px; --iso-space-8: 32px; --iso-page-padding: 24px; --iso-page-padding-mobile: 16px; /* A9 圓角（[衍生]：UX v2.0 無圓角規範；取小圓角貼近 Odoo backend）*/ --iso-radius-sm: 3px; --iso-radius-md: 4px; --iso-radius-lg: 6px; --iso-radius-xl: 8px; /* A10 陰影（focus glow 出自 UX §6.6；其餘 [衍生]）*/ --iso-shadow-focus: 0 0 0 3px rgba(113, 75, 103, .25); --iso-shadow-sm: 0 1px 2px 0 rgba(17, 12, 16, .06); --iso-shadow-md: 0 4px 6px -1px rgba(17, 12, 16, .10), 0 2px 4px -2px rgba(17, 12, 16, .10); --iso-shadow-lg: 0 10px 15px -3px rgba(17, 12, 16, .10), 0 4px 6px -4px rgba(17, 12, 16, .10); /* A11 版面（UX §4.1／§4.2）— @media 不吃自訂屬性，數值仍要寫死 */ --iso-sidebar-w: 250px; --iso-sidebar-w-collapsed: 64px; --iso-modal-w: 600px; --iso-touch-target-min: 44px; /* ── B. ERP MIGRAI（Cyodaa Teal）───────────────────────────────── */ /* B1 主品牌（設計系統 §1.2）*/ --mig-primary-50: #f0fdfa; --mig-primary-100: #ccfbf1; --mig-primary-500: #00a99d; --mig-primary-600: #0d9488; --mig-primary-700: #0f766e; /* B2 背景（60-30-10 的 60%）*/ --mig-bg-primary: #ffffff; --mig-bg-secondary: #f7f9fb; --mig-bg-tertiary: #f1f5f9; /* B3 文字與邊框 */ --mig-text-primary: #1a202c; --mig-text-secondary: #2d3748; --mig-text-tertiary: #4a5568; --mig-text-accent: #333333; --mig-border-light: #e2e8f0; --mig-border-medium: #cbd5e1; /* B4 狀態（success 為文件原文；warning/info/danger/neutral 為 [衍生]， * §1.3 只給語意 amber/blue/red/slate 未給 hex。orange 是禁用色，警告一律用 amber。*/ --mig-success: #10b981; --mig-success-bg: #d1fae5; --mig-warning: #d97706; --mig-warning-bg: #fef3c7; --mig-info: #2563eb; --mig-info-bg: #dbeafe; --mig-danger: #dc2626; --mig-danger-bg: #fee2e2; --mig-neutral: #475569; --mig-neutral-bg: #f1f5f9; /* B5 漸層（設計系統 §1.2）— 只給 Hero，不鋪大面積背景 */ --mig-gradient-primary: linear-gradient(135deg, #00a99d 0%, #6366f1 100%); /* B6 字體（設計系統 §3.1）*/ --mig-font-sans: 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif; --mig-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* [衍生] */ /* B7 字級（設計系統 §3.2）*/ --mig-fs-xs: 12px; --mig-lh-xs: 16px; --mig-fs-sm: 14px; --mig-lh-sm: 20px; --mig-fs-base: 16px; --mig-lh-base: 24px; --mig-fs-lg: 18px; --mig-lh-lg: 28px; --mig-fs-xl: 20px; --mig-lh-xl: 28px; --mig-fs-2xl: 24px; --mig-lh-2xl: 32px; --mig-fs-3xl: 30px; --mig-lh-3xl: 36px; /* B8 間距（設計系統 §6.1）*/ --mig-space-1: 4px; --mig-space-2: 8px; --mig-space-3: 12px; --mig-space-4: 16px; --mig-space-6: 24px; --mig-btn-padding: 8px 16px; /* B9 圓角（設計系統 §6.2）*/ --mig-radius-sm: 4px; --mig-radius-md: 6px; --mig-radius-lg: 8px; --mig-radius-xl: 12px; --mig-radius-2xl: 16px; --mig-radius-full: 9999px; /* B10 陰影（設計系統 §6.3「克制使用」；只有這四級， * 刻意不提供 xl / 2xl —— PLAN §4.3 的白名單到 lg 為止）*/ --mig-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --mig-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --mig-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --mig-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --mig-shadow-focus: 0 0 0 3px rgb(0 169 157 / .30); /* [衍生] */ /* B12 icon 尺寸（設計系統 §5.2）*/ --mig-icon-xs: 14px; --mig-icon-sm: 16px; --mig-icon-md: 20px; --mig-icon-lg: 24px; }