/** * CoSphere Design System — 全站唯一色票來源（Single Source of Truth） * * 規則（務必遵守）： * 1. 禁止在元件 CSS / HTML / JS 硬編碼品牌色 hex。一律用本檔變數。 * 2. 一般 UI（連結、選中、邊框、次要按鈕、表單 focus、badge 等） * → 用 --color-primary / --color-secondary / --color-accent / --color-warm / --color-soft * 3. Logo CTA（與 Logo 色一致的主行動按鈕）才可用 logo 色 * → --gradient-cta / --color-logo-blue / --color-logo-mint * 允許的 class：.btn-create、導覽 .nav-link.button（登入／註冊）、 * 手機底欄建立按鈕、空狀態「建立旅程」同等級主 CTA * 3b. 亮橘補助 CTA（參與／互動行動） * → --color-cta-action * 允許場景：「我想加入」、旅程留言「送出留言」／回覆送出、 * 建立旅程表單送出（.btn-submit）、.btn-cta-action * 勿與 Logo CTA、探索 .btn-explore（--color-accent）混用 * 4. 狀態色只用語意變數：--color-success / --color-warning / --color-danger * 5. 改色只改本檔；展示頁／文檔必須讀本檔變數，不可另寫一套色表 * * 說明：docs/design-system/README.md * 預覽：docs/design-system/design-system-buttons.html */ :root { /* ── Brand palette（柔黃／鼠尾草／藍／淡紫／橘）── */ --color-brand-yellow: #EECA7D; --color-brand-sage: #9EAC7F; --color-brand-blue: #6C91C9; --color-brand-lavender: #957CE8; --color-brand-orange: #DA7E34; --color-brand-yellow-rgb: 238, 202, 125; --color-brand-sage-rgb: 158, 172, 127; --color-brand-blue-rgb: 108, 145, 201; --color-brand-lavender-rgb: 149, 124, 232; --color-brand-orange-rgb: 218, 126, 52; /* Soft tints（icon / badge 底） */ --color-brand-yellow-soft: #F8F0DC; --color-brand-sage-soft: #E8EDDF; --color-brand-blue-soft: #E4EDF7; --color-brand-lavender-soft: #EDE8FA; --color-brand-orange-soft: #F8E4D4; /* ── Semantic aliases（元件請用這些）── */ --color-primary: var(--color-brand-blue); --color-primary-dark: #5578AE; --color-primary-light: #8BAAD6; --color-primary-rgb: 108, 145, 201; --color-secondary: var(--color-brand-sage); --color-secondary-dark: #879668; --color-secondary-rgb: 158, 172, 127; --color-accent: var(--color-brand-orange); --color-accent-dark: #C46A28; --color-accent-rgb: 218, 126, 52; --color-warm: var(--color-brand-yellow); --color-warm-dark: #C9A45A; --color-warm-soft: var(--color-brand-yellow-soft); --color-warm-rgb: 238, 202, 125; --color-soft: var(--color-brand-lavender); --color-soft-rgb: 149, 124, 232; /* Neutrals */ --color-text: #333333; --color-text-muted: #6B7280; --color-text-subtle: #9CA3AF; --color-text-strong: #111827; --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-surface: #FFFFFF; --color-surface-muted: #F8F9FA; --color-surface-hover: #F3F4F6; --color-bg: #FFFFFF; --color-overlay: rgba(0, 0, 0, 0.5); /* ── Logo CTA（僅主行動按鈕；勿用於一般 UI）── */ --color-logo-blue: #4E83C9; --color-logo-mint: #80D7C5; --color-logo-blue-rgb: 78, 131, 201; --color-logo-mint-rgb: 128, 215, 197; --gradient-cta: linear-gradient(135deg, var(--color-logo-mint) 0%, var(--color-logo-blue) 100%); --gradient-cta-hover: linear-gradient(135deg, var(--color-logo-blue) 0%, var(--color-logo-mint) 100%); /* ── 亮橘補助 CTA（參與／互動：加入、送出留言；非 Logo 主 CTA）── */ --color-cta-action: #FF7A1A; --color-cta-action-dark: #E8650A; --color-cta-action-rgb: 255, 122, 26; /* Gradients（一般裝飾；主 CTA 請用 --gradient-cta） */ --gradient-brand: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%); --gradient-brand-hover: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-surface-cool: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-brand-blue-soft) 100%); --gradient-personality-hero: linear-gradient( 135deg, var(--color-cta-action) 0%, var(--color-warm) 18%, var(--color-brand-orange-soft) 32%, var(--color-logo-mint) 58%, var(--color-primary) 82%, var(--color-primary-dark) 100% ); /* ── Personality themes（對齊 THEME_MODES / constants.js）── */ --color-personality-adventurer: var(--color-brand-lavender); --color-personality-adventurer-dark: #7A63C4; --color-personality-adventurer-soft: var(--color-brand-lavender-soft); --color-personality-planner: var(--color-brand-blue); --color-personality-planner-dark: var(--color-primary-dark); --color-personality-planner-soft: var(--color-brand-blue-soft); --color-personality-chill: var(--color-secondary-dark); --color-personality-chill-dark: #6F7C54; --color-personality-chill-soft: var(--color-brand-sage-soft); --color-personality-social: var(--color-warm-dark); --color-personality-social-dark: #A8843E; --color-personality-social-soft: var(--color-brand-yellow-soft); --color-personality-solo: var(--color-brand-orange); --color-personality-solo-dark: var(--color-accent-dark); --color-personality-solo-soft: var(--color-brand-orange-soft); --gradient-personality-adventurer: linear-gradient(135deg, var(--color-personality-adventurer) 0%, var(--color-personality-adventurer-dark) 100%); --gradient-personality-planner: linear-gradient(135deg, var(--color-personality-planner) 0%, var(--color-personality-planner-dark) 100%); --gradient-personality-chill: linear-gradient(135deg, var(--color-personality-chill) 0%, var(--color-personality-chill-dark) 100%); --gradient-personality-social: linear-gradient(135deg, var(--color-personality-social) 0%, var(--color-personality-social-dark) 100%); --gradient-personality-solo: linear-gradient(135deg, var(--color-personality-solo) 0%, var(--color-personality-solo-dark) 100%); --gradient-personality-deep: linear-gradient(180deg, #101D3D 0%, #172C53 80%); --color-personality-deep: #101D3D; --color-personality-deep-mid: #172C53; /* Status */ --color-success: #10B981; --color-success-dark: #059669; --color-success-text: #155724; --color-success-border: #C3E6CB; --color-success-soft: #D1FAE5; --color-danger: #EF4444; --color-danger-dark: #DC2626; --color-danger-text: #991B1B; --color-danger-border: #FCA5A5; --color-danger-soft: #FEE2E2; --color-warning: #F59E0B; --color-warning-text: #92400E; --color-warning-border: #FCD34D; --color-warning-soft: #FEF3C7; /* Social-proof / warm badge */ --color-proof-bg-start: #F8F0DC; --color-proof-bg-end: #F3E0B0; --color-proof-text: #8A5A1E; --color-proof-strong: #9A4F1A; /* Legacy aliases（舊變數名 → 指向本檔，避免分叉） */ --primary-color: var(--color-primary); }