/* ============================================================
   子站 10 組明亮主題 CSS Variables
   ------------------------------------------------------------
   設計系統（frontend-design）：
   - --c-primary      明亮主色，上面配 --c-on-primary（深墨字）→ 明亮按鈕/導覽。
   - --c-primary-dark 深色錨點（Hero / Footer / hover 背景），配白字 → 層次與穩重。
   - --c-accent       明亮輔色（Hero/大型裝飾、accent 文字在深底）。
   - --c-accent-dark  夠深的輔色（淺底上的小字 eyebrow，達 AA）。
   - 底色 --c-surface 純白、--c-bg 極淺 hue 染白 → 明亮感主要來源。
   字體統一 Noto Serif TC（標題）+ Noto Sans TC（內文）。
   class 對應 SiteThemeKeyExtensions.ToThemeClass()。
   ============================================================ */

/* ─── 1. 暖陽金 SunlitGold ──────────────────────────── */
.theme-sunlit-gold {
    --c-primary: #ECB22F;
    --c-on-primary: #34280A;
    --c-primary-dark: #7A5408;
    --c-primary-light: #F6CF74;
    --c-accent: #FFD36B;
    --c-accent-dark: #8F6A0C;
    --c-text: #2A2520;
    --c-text-soft: #5A5249;
    --c-text-mute: #8C857B;
    --c-surface: #FFFFFF;
    --c-surface-alt: #FBF4E2;
    --c-line: #ECDFBE;
    --c-bg: #FCFAF2;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(236, 178, 47, 0.18);
    --sh-deep: 0 18px 44px rgba(122, 84, 8, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(255, 211, 107, 0.14) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(122, 84, 8, 0.86), rgba(18, 14, 4, 0.78));
}

/* ─── 2. 珊瑚紅 Coral ───────────────────────────────── */
.theme-coral {
    --c-primary: #F76C72;
    --c-on-primary: #3A1418;
    --c-primary-dark: #C1303E;
    --c-primary-light: #FF9FA6;
    --c-accent: #FF9C86;
    --c-accent-dark: #C1303E;
    --c-text: #2A2120;
    --c-text-soft: #594E4D;
    --c-text-mute: #8B807F;
    --c-surface: #FFFFFF;
    --c-surface-alt: #FFF1F1;
    --c-line: #FAD7D9;
    --c-bg: #FFF8F8;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(247, 108, 114, 0.20);
    --sh-deep: 0 18px 44px rgba(193, 48, 62, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(255, 156, 134, 0.14) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(193, 48, 62, 0.86), rgba(28, 8, 10, 0.78));
}

/* ─── 3. 蜜桃橘 Peach ───────────────────────────────── */
.theme-peach {
    --c-primary: #F58A4B;
    --c-on-primary: #341C0A;
    --c-primary-dark: #B85518;
    --c-primary-light: #FBB488;
    --c-accent: #FFBC85;
    --c-accent-dark: #B85518;
    --c-text: #2A211B;
    --c-text-soft: #594E45;
    --c-text-mute: #8B8076;
    --c-surface: #FFFFFF;
    --c-surface-alt: #FFF3E9;
    --c-line: #F7DBC6;
    --c-bg: #FFF9F3;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(245, 138, 75, 0.20);
    --sh-deep: 0 18px 44px rgba(184, 85, 24, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(255, 188, 133, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(184, 85, 24, 0.86), rgba(26, 14, 4, 0.78));
}

/* ─── 4. 萊姆綠 Lime ────────────────────────────────── */
.theme-lime {
    --c-primary: #9DCB3B;
    --c-on-primary: #1E2A08;
    --c-primary-dark: #4F6E14;
    --c-primary-light: #C2E07A;
    --c-accent: #C7E87C;
    --c-accent-dark: #5E7A18;
    --c-text: #23271A;
    --c-text-soft: #4F5446;
    --c-text-mute: #838878;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F4F9E6;
    --c-line: #DEEAC4;
    --c-bg: #FAFCF2;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(157, 203, 59, 0.22);
    --sh-deep: 0 18px 44px rgba(79, 110, 20, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(199, 232, 124, 0.18) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(79, 110, 20, 0.86), rgba(14, 18, 4, 0.78));
}

/* ─── 5. 翠玉綠 Jade ────────────────────────────────── */
.theme-jade {
    --c-primary: #2BB985;
    --c-on-primary: #052519;
    --c-primary-dark: #0E7351;
    --c-primary-light: #71D6AE;
    --c-accent: #7FE0BA;
    --c-accent-dark: #0E7351;
    --c-text: #1C2824;
    --c-text-soft: #4A5651;
    --c-text-mute: #82908A;
    --c-surface: #FFFFFF;
    --c-surface-alt: #EAF8F1;
    --c-line: #CDEADD;
    --c-bg: #F4FBF8;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(43, 185, 133, 0.20);
    --sh-deep: 0 18px 44px rgba(14, 115, 81, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(127, 224, 186, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(14, 115, 81, 0.86), rgba(4, 22, 16, 0.78));
}

/* ─── 6. 湖水青 Teal ────────────────────────────────── */
.theme-teal {
    --c-primary: #1BB6B6;
    --c-on-primary: #052323;
    --c-primary-dark: #0A6E6E;
    --c-primary-light: #6FD3D3;
    --c-accent: #74DADA;
    --c-accent-dark: #0A6E6E;
    --c-text: #1B2828;
    --c-text-soft: #495555;
    --c-text-mute: #828F8F;
    --c-surface: #FFFFFF;
    --c-surface-alt: #E8F7F7;
    --c-line: #C9EAEA;
    --c-bg: #F3FBFB;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(27, 182, 182, 0.20);
    --sh-deep: 0 18px 44px rgba(10, 110, 110, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(116, 218, 218, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(10, 110, 110, 0.86), rgba(4, 20, 20, 0.78));
}

/* ─── 7. 晴空藍 Sky ─────────────────────────────────── */
.theme-sky {
    --c-primary: #3FA0E8;
    --c-on-primary: #07223A;
    --c-primary-dark: #1C5E96;
    --c-primary-light: #84C2EF;
    --c-accent: #8FCBF2;
    --c-accent-dark: #1C5E96;
    --c-text: #1D2530;
    --c-text-soft: #4B535F;
    --c-text-mute: #838B96;
    --c-surface: #FFFFFF;
    --c-surface-alt: #EAF4FC;
    --c-line: #CFE5F6;
    --c-bg: #F4F9FE;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(63, 160, 232, 0.20);
    --sh-deep: 0 18px 44px rgba(28, 94, 150, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(143, 203, 242, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(28, 94, 150, 0.86), rgba(4, 16, 28, 0.78));
}

/* ─── 8. 靛藍 Indigo ────────────────────────────────── */
.theme-indigo {
    --c-primary: #6A78E8;
    --c-on-primary: #141738;
    --c-primary-dark: #3A47A8;
    --c-primary-light: #A2ACEF;
    --c-accent: #AAB4F2;
    --c-accent-dark: #3A47A8;
    --c-text: #20242F;
    --c-text-soft: #4E525E;
    --c-text-mute: #868A95;
    --c-surface: #FFFFFF;
    --c-surface-alt: #EEF0FC;
    --c-line: #D6DBF6;
    --c-bg: #F6F7FE;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(106, 120, 232, 0.20);
    --sh-deep: 0 18px 44px rgba(58, 71, 168, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(170, 180, 242, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(58, 71, 168, 0.86), rgba(8, 10, 28, 0.78));
}

/* ─── 9. 薰衣草紫 Violet ────────────────────────────── */
.theme-violet {
    --c-primary: #A472EE;
    --c-on-primary: #1E1233;
    --c-primary-dark: #6A3FB0;
    --c-primary-light: #C8A7F4;
    --c-accent: #CDAEF5;
    --c-accent-dark: #6A3FB0;
    --c-text: #26222F;
    --c-text-soft: #534E5E;
    --c-text-mute: #898595;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F3ECFC;
    --c-line: #E0D0F4;
    --c-bg: #F9F5FE;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(164, 114, 238, 0.20);
    --sh-deep: 0 18px 44px rgba(106, 63, 176, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(205, 174, 245, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(106, 63, 176, 0.86), rgba(16, 8, 28, 0.78));
}

/* ─── 10. 桃紅 Rose ─────────────────────────────────── */
.theme-rose {
    --c-primary: #EC68A6;
    --c-on-primary: #33122A;
    --c-primary-dark: #B23A75;
    --c-primary-light: #F5A2C8;
    --c-accent: #F8ACCE;
    --c-accent-dark: #B23A75;
    --c-text: #2A2026;
    --c-text-soft: #594E54;
    --c-text-mute: #8B8086;
    --c-surface: #FFFFFF;
    --c-surface-alt: #FFEFF6;
    --c-line: #F6D2E4;
    --c-bg: #FFF6FA;

    --f-display: "Noto Serif TC", serif;
    --f-body: "Noto Sans TC", system-ui, sans-serif;
    --f-accent: "Noto Serif TC", serif;

    --r-card: 14px;
    --r-pill: 999px;
    --sh-card: 0 4px 16px rgba(236, 104, 166, 0.20);
    --sh-deep: 0 18px 44px rgba(178, 58, 117, 0.20);

    --motif-bg: radial-gradient(circle at 1px 1px, rgba(248, 172, 206, 0.16) 1px, transparent 0);
    --hero-overlay: linear-gradient(160deg, rgba(178, 58, 117, 0.86), rgba(26, 6, 18, 0.78));
}