/* ========================================================================== themes.css — 4 Tema Warna (rotasi otomatis per kuartal, lihat main.js) Cara pakai: set atribut pada . Tiap tema HANYA mengubah variabel warna brand — layout tetap sama. ========================================================================== */ /* Tema 1 — Biru Korporat (default: Jan–Mar) */ :root, [data-theme="blue"] { --c-primary: #00A9FF; --c-primary-dark: #0087CC; --c-primary-light: #89CFF3; --c-primary-50: #CDF5FD; --c-accent: #F2B705; --c-accent-dark: #CF9A00; --c-on-primary: #FFFFFF; --c-bg: #CDF5FD; --c-pattern: #A0E9FF; } /* Tema 2 — Hijau (Apr–Jun) */ [data-theme="green"] { --c-primary: #9D6638; --c-primary-dark: #4E220F; --c-primary-light: #B0BA99; --c-primary-50: #F7F1DE; --c-accent: #F2B705; --c-accent-dark: #CF9A00; --c-on-primary: #FFFFFF; --c-bg: #F7F1DE; --c-pattern: #D3D5BB; } /* Tema 3 — Merah Marun (Jul–Sep) */ [data-theme="maroon"] { --c-primary: #8C1D2C; --c-primary-dark: #6A1421; --c-primary-light: #B0495A; --c-primary-50: #F9EBED; --c-accent: #E0A22A; --c-accent-dark: #B9831A; --c-on-primary: #FFFFFF; --c-bg: #FBEEEF; --c-pattern: #F6DCDF; } /* Tema 4 — Teal (Okt–Des) */ [data-theme="teal"] { --c-primary: #0E6E72; --c-primary-dark: #0A5155; --c-primary-light: #3F9398; --c-primary-50: #E6F3F3; --c-accent: #F2782C; --c-accent-dark: #CF5E16; --c-on-primary: #FFFFFF; --c-bg: #E7F4F4; --c-pattern: #D6ECEC; } /* Tema 5 — Retro */ [data-theme="retro"] { --c-primary: #1E93AB; --c-primary-dark: #166E80; --c-primary-light: #8EC9D5; --c-primary-50: #F3F2EC; --c-accent: #E62727; --c-accent-dark: #B81F1F; --c-on-primary: #FFFFFF; --c-bg: #F3F2EC; --c-pattern: #DCDCDC; --card-tag-font: white; } /* Tema 6 — Corporate */ [data-theme="corporate"] { --c-primary: #3F72AF; --c-primary-dark: #112D4E; --c-primary-light: #DBE2EF; --c-primary-50: #F9F7F7; --c-accent: #F2B705; --c-accent-dark: #CF9A00; --c-on-primary: #FFFFFF; --c-bg: #F9F7F7; --c-pattern: #DBE2EF; --card-tag-font: white; } /* Tema 7 — Industrial Blue */ [data-theme="industrial"] { --c-primary: #1985A1; --c-primary-dark: #46494C; --c-primary-light: #4C5C68; --c-primary-50: #DCDCDD; --c-accent: #D98B3F; --c-accent-dark: #B3701F; --c-on-primary: #FFFFFF; --c-bg: #DCDCDD; --c-pattern: #C5C3C6; --card-tag-font: white; } /* Tema 8 — Shady Forest Frenzy */ [data-theme="forestfrenzy"] { --c-primary: #066839; --c-primary-dark: #14452F; --c-primary-light: #0A5C36; --c-primary-50: #E8F0EA; --c-accent: #C9A227; --c-accent-dark: #A6841C; --c-on-primary: #FFFFFF; --c-bg: #E8F0EA; --c-pattern: #18392B; --card-tag-font: white; } /* Tema 9 — Cozy Cabin Retreat */ [data-theme="cozycabin"] { --c-primary: #D0755C; --c-primary-dark: #88352B; --c-primary-light: #EBCEB1; --c-primary-50: #EEE9DE; --c-accent: #798187; --c-accent-dark: #576169; --c-on-primary: #FFFFFF; --c-bg: #EEE9DE; --c-pattern: #929489; --card-tag-font: white; }