/* ========================================================================== aEnrich Design System - Foundation Tokens aEnrich Technology Corporation ========================================================================== */ :root { /* ========================================================================== BRAND COLORS ========================================================================== */ /* Primary brand scale brand-500 (#004EA2) is the core aEnrich brand color. Used for: - Logo - Primary buttons - Links - Key headings */ --brand-50: #E6EEF8; --brand-100: #CCE0F1; --brand-200: #99C2E3; --brand-300: #66A3D5; --brand-400: #3385C7; --brand-500: #004EA2; --brand-600: #00458F; --brand-700: #003A78; --brand-800: #002F61; --brand-900: #001F3F; /* Brand aliases */ --aenrich-blue: var(--brand-500); --aenrich-blue-deep: var(--brand-700); --aenrich-blue-light: #0097E0; /* ========================================================================== PRODUCT COLORS ========================================================================== */ /* Module colors for the a+HCM ecosystem. Used in: - Dashboards - Navigation - Charts - Badges - Module indicators */ --product-talent: #003477; /* Talent Management */ --product-lms: #0097E0; /* Learning Management System */ --product-pmd: #22AC38; /* Performance Management & Development */ --product-mra: #E60012; /* Multi-Rater Assessment */ --product-hrm: #004EA2; /* Human Resource Management */ --product-core: #6FC6C9; /* Core Platform */ --product-ldr: #F39800; /* Learning and Development Roadmap */ --product-idp: #C4D700; /* Individual Development Plan */ --product-com: #FDD000; /* Competency */ --product-tcr: #BE8915; /* Training for Compliance and Regulations */ --product-ska: #EC707A; /* Skill Assessment */ --product-mps: #92308D; /* Mobile Performance Support */ /* ========================================================================== SEMANTIC PRODUCT ALIASES ========================================================================== */ /* Human-readable semantic aliases Recommended for future UI development */ --product-learning: var(--product-lms); --product-performance: var(--product-pmd); --product-assessment: var(--product-mra); --product-competency: var(--product-com); --product-development: var(--product-ldr); --product-compliance: var(--product-tcr); --product-mobile-support: var(--product-mps); /* ========================================================================== NEUTRALS ========================================================================== */ /* Neutral grayscale palette */ --gray-0: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --white: #FFFFFF; /* ========================================================================== SEMANTIC TOKENS ========================================================================== */ /* Backgrounds */ --bg-page: var(--gray-50); --bg-card: var(--gray-0); --bg-subtle: var(--gray-100); --bg-brand: var(--brand-500); --bg-brand-soft: var(--brand-50); /* Borders */ --border-default: var(--gray-200); --border-strong: var(--gray-300); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-disabled: var(--gray-400); --text-on-brand: var(--white); /* Links */ --link-default: var(--brand-500); --link-hover: var(--brand-700); /* ========================================================================== STATUS COLORS ========================================================================== */ /* Success */ --success-100: #E6F4EA; --success-500: #22C55E; --success-700: #15803D; /* Warning */ --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-700: #B45309; /* Error */ --error-100: #FEE2E2; --error-500: #EF4444; --error-700: #B91C1C; /* Info */ --info-100: #DBEAFE; --info-500: #3B82F6; --info-700: #1D4ED8; /* ========================================================================== TYPOGRAPHY ========================================================================== */ /* Display font — 思源黑體系列 (CJK-first display) */ --font-display: "Noto Sans TC", /* Google Fonts 版本 */ "Source Han Sans TC", /* Adobe 本地版本 */ "Microsoft JhengHei", "PingFang TC", sans-serif; /* Chinese font stack */ --font-cjk: "Noto Sans TC", /* 1. Google Fonts 版本，確保跨裝置一致 */ "Source Han Sans TC", /* 2. Adobe 版本，本地端系統字 */ "Microsoft JhengHei", /* 3. Windows 預設：微軟正黑體 (備援) */ "PingFang TC", /* 4. Mac 預設：蘋方體 (備援) */ sans-serif; /* 5. 系統預設黑體 (最後防線) */ /* UI sans-serif stack */ --font-sans: "Noto Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Monospace stack */ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* ========================================================================== TYPE SCALE ========================================================================== */ --fs-display-xl: 56px; --fs-display-l: 44px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 17px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px; --fs-overline: 11px; --lh-display-xl: 1.08; --lh-display-l: 1.12; --lh-h1: 1.16; --lh-h2: 1.22; --lh-h3: 1.30; --lh-h4: 1.35; --lh-body-lg: 1.60; --lh-body: 1.60; --lh-body-sm: 1.50; --lh-caption: 1.40; --lh-overline: 1.30; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ========================================================================== SPACING ========================================================================== */ /* 8px spacing system */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ========================================================================== RADII ========================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* ========================================================================== SHADOWS ========================================================================== */ --shadow-xs: 0 1px 2px rgba(14, 15, 18, 0.06); --shadow-sm: 0 1px 3px rgba(14, 15, 18, 0.08), 0 1px 2px rgba(14, 15, 18, 0.04); --shadow-md: 0 4px 10px rgba(14, 15, 18, 0.08), 0 2px 4px rgba(14, 15, 18, 0.04); --shadow-lg: 0 12px 28px rgba(14, 15, 18, 0.10), 0 4px 8px rgba(14, 15, 18, 0.04); --shadow-focus: 0 0 0 3px rgba(0, 78, 162, 0.25); /* ========================================================================== MOTION ========================================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 300ms; }