/* FaithCommunityOS theming system. Palettes are selected via [data-palette] on ; mode via [data-theme] (light|dark). Every palette defines the same variable contract so components never hardcode colors. */ :root, [data-theme="light"] { --fc-bg: #f7f8fb; --fc-bg-elevated: #ffffff; --fc-bg-subtle: #eef0f6; --fc-text: #1a1d29; --fc-text-muted: #5b6178; --fc-border: #e2e5ee; --fc-shadow: 0 8px 24px rgba(20, 22, 40, 0.08); --fc-overlay: rgba(255, 255, 255, 0.7); } [data-theme="dark"] { --fc-bg: #12131c; --fc-bg-elevated: #1b1d29; --fc-bg-subtle: #22243280; --fc-text: #f1f2f8; --fc-text-muted: #a3a8c0; --fc-border: #2e3142; --fc-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --fc-overlay: rgba(18, 19, 28, 0.7); } /* ---------- Palette: Indigo (default) ---------- */ [data-palette="indigo"] { --fc-primary: #5b5bd6; --fc-primary-hover: #4a4ac2; --fc-primary-contrast: #ffffff; --fc-secondary: #22c1c3; --fc-accent: #f7b32b; --fc-gradient: linear-gradient(135deg, #5b5bd6 0%, #8b5cf6 50%, #22c1c3 100%); } /* ---------- Palette: Emerald ---------- */ [data-palette="emerald"] { --fc-primary: #0f9d6e; --fc-primary-hover: #0c8259; --fc-primary-contrast: #ffffff; --fc-secondary: #2f6fed; --fc-accent: #f2b705; --fc-gradient: linear-gradient(135deg, #0f9d6e 0%, #2fbf85 50%, #2f6fed 100%); } /* ---------- Palette: Sunset ---------- */ [data-palette="sunset"] { --fc-primary: #ef5f4e; --fc-primary-hover: #d9483a; --fc-primary-contrast: #ffffff; --fc-secondary: #f2994a; --fc-accent: #ffd166; --fc-gradient: linear-gradient(135deg, #ef5f4e 0%, #f2994a 50%, #ffd166 100%); } /* ---------- Palette: Ocean ---------- */ [data-palette="ocean"] { --fc-primary: #0e7cbf; --fc-primary-hover: #0b649b; --fc-primary-contrast: #ffffff; --fc-secondary: #14b8a6; --fc-accent: #7dd3fc; --fc-gradient: linear-gradient(135deg, #0e7cbf 0%, #14b8a6 50%, #7dd3fc 100%); } /* ---------- Palette: Rose ---------- */ [data-palette="rose"] { --fc-primary: #e0457b; --fc-primary-hover: #c53468; --fc-primary-contrast: #ffffff; --fc-secondary: #9155d6; --fc-accent: #ffb3c7; --fc-gradient: linear-gradient(135deg, #e0457b 0%, #9155d6 50%, #ffb3c7 100%); } /* ---------- Map Bootstrap's primary color to the active palette ---------- Several pages still use Bootstrap's built-in .btn-primary/.text-primary/.bg-primary classes. Overriding Bootstrap's own CSS variables keeps those elements in sync with the selected color palette instead of Bootstrap's default blue. */ html { --bs-primary: var(--fc-primary); --bs-primary-rgb: var(--fc-primary-rgb, 91, 91, 214); --bs-link-color: var(--fc-primary); --bs-link-color-rgb: var(--fc-primary-rgb, 91, 91, 214); --bs-link-hover-color: var(--fc-primary-hover); } .btn-primary { --bs-btn-bg: var(--fc-primary); --bs-btn-border-color: var(--fc-primary); --bs-btn-hover-bg: var(--fc-primary-hover); --bs-btn-hover-border-color: var(--fc-primary-hover); --bs-btn-active-bg: var(--fc-primary-hover); --bs-btn-active-border-color: var(--fc-primary-hover); --bs-btn-disabled-bg: var(--fc-primary); --bs-btn-disabled-border-color: var(--fc-primary); color: var(--fc-primary-contrast); } .text-primary { color: var(--fc-primary) !important; } .bg-primary { background-color: var(--fc-primary) !important; } /* ---------- Global application of variables ---------- */ html, body { background-color: var(--fc-bg); color: var(--fc-text); transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--fc-primary); } a:hover { color: var(--fc-primary-hover); } .fc-navbar { background-color: var(--fc-bg-elevated); border-bottom: 1px solid var(--fc-border); box-shadow: var(--fc-shadow); } .fc-navbar .navbar-brand { color: var(--fc-text); font-weight: 700; letter-spacing: -0.02em; } .fc-navbar .nav-link { color: var(--fc-text-muted); font-weight: 500; } .fc-navbar .nav-link:hover { color: var(--fc-primary); } .btn-fc-primary { background: var(--fc-gradient); border: none; color: var(--fc-primary-contrast); font-weight: 600; box-shadow: var(--fc-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-fc-primary:hover { transform: translateY(-1px); filter: brightness(1.05); color: var(--fc-primary-contrast); } .btn-fc-outline { background: transparent; border: 1.5px solid var(--fc-border); color: var(--fc-text); font-weight: 600; } .btn-fc-outline:hover { border-color: var(--fc-primary); color: var(--fc-primary); } .fc-card { background-color: var(--fc-bg-elevated); border: 1px solid var(--fc-border); border-radius: 16px; box-shadow: var(--fc-shadow); } .fc-surface { background-color: var(--fc-bg-subtle); border-radius: 16px; } .fc-muted { color: var(--fc-text-muted); } .fc-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--fc-bg-elevated); box-shadow: 0 0 0 1px var(--fc-border); cursor: pointer; display: inline-block; transition: transform 0.1s ease; } .fc-swatch:hover { transform: scale(1.1); } .fc-swatch.active { box-shadow: 0 0 0 2px var(--fc-primary); } .fc-swatch-indigo { background: linear-gradient(135deg, #5b5bd6, #22c1c3); } .fc-swatch-emerald { background: linear-gradient(135deg, #0f9d6e, #2f6fed); } .fc-swatch-sunset { background: linear-gradient(135deg, #ef5f4e, #ffd166); } .fc-swatch-ocean { background: linear-gradient(135deg, #0e7cbf, #7dd3fc); } .fc-swatch-rose { background: linear-gradient(135deg, #e0457b, #ffb3c7); }