/* ============================================================ 銀星創意 — Modes & accent themes ------------------------------------------------------------ SURFACE MODES (set data-mode on or any container): (default) 亮色 light data-mode="dark" 深色 dark data-mode="luxe" 星夜精緻 — ivory marketing surface for 官網 / 電商門面; headings switch to serif via --font-display. ACCENT THEMES (set data-theme; combinable with any mode): (default) amber-gold 暗琥珀金 data-theme="indigo" 靛藍 data-theme="pine" 松綠 data-theme="copper" 玫瑰銅 Themes re-tint ONLY the accent ramp; navy primary, neutrals and status stay put. All values below keep AA (text ≥4.5:1, graphics ≥3:1) on their intended surfaces. ============================================================ */ /* ================= DARK MODE ================= */ [data-mode="dark"] { --sys-primary: #E4EBF5; /* solid buttons invert */ --sys-primary-mid: #F2F6FB; --sys-primary-tint: #1C2A42; --sys-on-primary: #10243E; /* 12.6:1 ✓ */ --sys-secondary: var(--ref-gold-300); /* 7.4:1 on card ✓ */ --sys-secondary-deep: var(--ref-gold-200); --sys-secondary-teal: var(--ref-gold-400); --sys-tonal: #2C230E; --sys-accent-solid: var(--ref-gold-300); --sys-accent-solid-hover: #E8B84B; --sys-accent-solid-active: #D08F1F; --sys-on-accent: var(--ref-gold-ink); --sys-accent-strong: var(--ref-gold-300); /* deep-gold CTA keeps white ink in dark mode too (inherits :root) */ --sys-link: #8FB4D9; /* 6.2:1 on card ✓ */ --sys-link-hover: #C7DAEE; --sys-text-strong: #F6F9FC; --sys-text: #F2F5FA; --sys-text-body: #C7D1E0; --sys-text-muted: #93A2BB; /* 5.5:1 on card ✓ */ --sys-text-faint: #8291AB; /* 4.5:1 on card ✓ */ --sys-text-onfill: #F2F5FA; --sys-icon: #93A2BB; --sys-surface-app: #0C1322; --sys-surface-card: #131D31; --sys-surface-sunken: #0A101C; --sys-surface-row: #182338; --sys-shell: #0A111F; --sys-shell-deep: #070C16; --sys-on-shell: #F2F5FA; --sys-on-shell-muted: #8E9EB8; --sys-shell-line: rgba(255, 255, 255, 0.07); --sys-border: #223049; --sys-border-strong: #5D7194; /* 3.1:1 on card ✓ */ --sys-info: #82B4E8; --sys-info-fill: #122840; --sys-success: #5BC79A; --sys-success-fill: #0F2A1F; --sys-warning: #E8A45E; --sys-warning-fill: #2C1F0D; --sys-error: #F09090; --sys-error-fill: #331718; --sys-on-status: #0C1322; /* deeper elevation in the dark */ --shadow-20: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -20px rgba(0, 0, 0, 0.60); --shadow-40: 0 2px 4px rgba(0, 0, 0, 0.40), 0 16px 40px -16px rgba(0, 0, 0, 0.70); --shadow-60: 0 30px 70px -24px rgba(0, 0, 0, 0.85); color-scheme: dark; } /* ================= LUXE MODE (星夜精緻) ================= */ [data-mode="luxe"] { --sys-surface-app: #F7F5F0; /* ivory */ --sys-surface-card: #FFFFFF; --sys-surface-sunken: #F2EFE8; --sys-surface-row: #F4F1EA; --sys-border: #E7E2D6; --sys-border-strong: #79735F; /* 3.4:1 on ivory ✓ */ /* gold text needs one step deeper on ivory */ --sys-secondary: #8A5E08; /* 4.8:1 on ivory ✓ */ --sys-link: #8A5E08; --sys-link-hover: var(--ref-navy-800); --sys-text-muted: #5C6C86; /* 4.7:1 on ivory ✓ */ --sys-text-faint: #646F85; /* serif display voice for marketing pages */ --font-display: "Noto Serif TC", "Songti TC", "PMingLiU", serif; --ls-display: 1px; --shadow-card: 0 1px 2px rgba(61, 58, 48, 0.05), 0 14px 34px -22px rgba(61, 58, 48, 0.25); } /* ================= ACCENT THEMES ================= */ /* 靛藍 Indigo — cool tech */ [data-theme="indigo"] { --sys-secondary: #4338CA; /* 7.7:1 ✓ */ --sys-secondary-deep: #3730A3; --sys-secondary-teal: #A5B4FC; --sys-tonal: #EEF0FD; --sys-accent-solid: #4F46E5; /* white ink OK (4.8:1) */ --sys-accent-solid-hover: #6366F1; --sys-accent-solid-active: #4338CA; --sys-on-accent: #FFFFFF; --sys-accent-strong: #4F46E5; --sys-gold-gradient: linear-gradient(180deg, #4F46E5, #4338CA); /* @kind color */ --shadow-gold: 0 6px 16px -8px rgba(67, 56, 202, 0.5); --sys-link: #4338CA; --ref-gradient-c: #818CF8; } [data-mode="dark"][data-theme="indigo"] { --sys-secondary: #A5B4FC; --sys-secondary-deep: #C7D2FE; --sys-secondary-teal: #818CF8; --sys-tonal: #1E2145; --sys-accent-solid: #6366F1; --sys-accent-solid-hover: #818CF8; --sys-accent-solid-active: #4F46E5; --sys-on-accent: #FFFFFF; --sys-accent-strong: #A5B4FC; --sys-link: #A5B4FC; } /* 松綠 Pine — calm institutional */ [data-theme="pine"] { --sys-secondary: #17604A; /* 5.9:1 ✓ */ --sys-secondary-deep: #114736; --sys-secondary-teal: #9CC5B0; --sys-tonal: #EAF5EF; --sys-accent-solid: #196049; /* white ink 5.7:1 ✓ */ --sys-accent-solid-hover: #217A5D; --sys-accent-solid-active: #14503C; --sys-on-accent: #FFFFFF; --sys-accent-strong: #268A6A; /* graphics 3.1:1 ✓ */ --sys-gold-gradient: linear-gradient(180deg, #217A5D, #14503C); /* @kind color */ --shadow-gold: 0 6px 16px -8px rgba(20, 80, 60, 0.5); --sys-link: #17604A; --ref-gradient-c: #4FA283; } [data-mode="dark"][data-theme="pine"] { --sys-secondary: #6FC29E; --sys-secondary-deep: #9AD8BC; --sys-secondary-teal: #4FA283; --sys-tonal: #10271E; --sys-accent-solid: #2E9070; --sys-accent-solid-hover: #3AA582; --sys-accent-solid-active: #24775B; --sys-on-accent: #06231A; --sys-accent-strong: #6FC29E; --sys-link: #8CCBAF; } /* 玫瑰銅 Copper — warm editorial */ [data-theme="copper"] { --sys-secondary: #9A4633; /* 5.9:1 ✓ */ --sys-secondary-deep: #7C3627; --sys-secondary-teal: #D8A18F; --sys-tonal: #FAEEE9; --sys-accent-solid: #A8503C; /* white ink 5.0:1 ✓ */ --sys-accent-solid-hover: #B75E48; --sys-accent-solid-active: #8E4230; --sys-on-accent: #FFFFFF; --sys-accent-strong: #C2664E; /* graphics 3.4:1 ✓ */ --sys-gold-gradient: linear-gradient(180deg, #A8503C, #8E4230); /* @kind color */ --shadow-gold: 0 6px 16px -8px rgba(142, 66, 48, 0.5); --sys-link: #9A4633; --ref-gradient-c: #D8836B; } [data-mode="dark"][data-theme="copper"] { --sys-secondary: #E29B85; --sys-secondary-deep: #F0BCAC; --sys-secondary-teal: #C2664E; --sys-tonal: #33170F; --sys-accent-solid: #C2664E; --sys-accent-solid-hover: #D0785F; --sys-accent-solid-active: #A8503C; --sys-on-accent: #2B0F08; --sys-accent-strong: #E29B85; --sys-link: #E8AC99; }