/* ═══════════════════════════════════════════════════════════════════
FFH THEME · v1 — Light + Dark + Auto
═══════════════════════════════════════════════════════════════════
How to use on any FFH page:
1. Add to :
2. Reference colors with the CSS variables below instead of hardcoded hex.
3. The brand colors (--ffh-orange, --ffh-gold, --ffh-navy-brand) stay
constant — they're the identity. Only surfaces, text, and borders
swap between modes.
Active theme is set on . The script in
ffh-theme.js handles auto/system, persistence, and the runtime toggle.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── BRAND COLORS (constant across themes — never change) ── */
--ffh-orange: #e8450a;
--ffh-orange-2: #c73a08;
--ffh-orange-soft: #f97316;
--ffh-gold: #f59e0b;
--ffh-gold-2: #fbbf24;
--ffh-gold-soft: #fde68a;
--ffh-red: #dc2626;
--ffh-green: #16a34a;
--ffh-teal: #0d9488;
--ffh-blue: #2563eb;
--ffh-purple: #7c3aed;
--ffh-navy-brand: #0f2044; /* Brand navy — keeps showing in CTAs, hero gradients */
/* ── SHARED TYPOGRAPHY (theme-independent) ── */
--ffh-serif: 'Georgia', 'Times New Roman', serif;
--ffh-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ── LIGHT THEME (default) ── */
:root,
:root[data-theme="light"] {
--ffh-bg: #f4f6fa; /* page background */
--ffh-bg-elevated: #ffffff; /* card / surface */
--ffh-bg-sunken: #eef1f7; /* recessed area (inputs, code, etc) */
--ffh-bg-overlay: rgba(15, 32, 68, 0.45); /* modal backdrop */
--ffh-text: #1a2238; /* primary text */
--ffh-text-soft: #455370; /* secondary text */
--ffh-text-muted: #6b7a99; /* tertiary / captions */
--ffh-text-on-navy: #ffffff; /* always white on navy surfaces */
--ffh-border: #e2e8f0;
--ffh-border-strong: #cbd5e1;
--ffh-shadow-sm: 0 1px 4px rgba(15, 32, 68, 0.06);
--ffh-shadow-md: 0 2px 12px rgba(15, 32, 68, 0.08);
--ffh-shadow-lg: 0 8px 30px rgba(15, 32, 68, 0.14);
/* Nav bar — light mode keeps brand navy nav by default */
--ffh-nav-bg: var(--ffh-navy-brand);
--ffh-nav-text: #ffffff;
--ffh-nav-text-soft: rgba(255, 255, 255, 0.7);
--ffh-nav-border: rgba(255, 255, 255, 0.08);
color-scheme: light;
}
/* ── DARK THEME ── */
:root[data-theme="dark"] {
--ffh-bg: #091632; /* deep navy */
--ffh-bg-elevated: #122850; /* card / surface */
--ffh-bg-sunken: #0a1a3a; /* recessed area */
--ffh-bg-overlay: rgba(0, 0, 0, 0.7);
--ffh-text: #f4f6fa;
--ffh-text-soft: #c7d2e0;
--ffh-text-muted: #94a2b8;
--ffh-text-on-navy: #ffffff;
--ffh-border: rgba(255, 255, 255, 0.12);
--ffh-border-strong: rgba(255, 255, 255, 0.24);
--ffh-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
--ffh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
--ffh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
--ffh-nav-bg: #050d24;
--ffh-nav-text: #ffffff;
--ffh-nav-text-soft: rgba(255, 255, 255, 0.7);
--ffh-nav-border: rgba(255, 255, 255, 0.08);
color-scheme: dark;
}
/* ── AUTO THEME — honor system preference when no explicit choice ── */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--ffh-bg: #091632;
--ffh-bg-elevated: #122850;
--ffh-bg-sunken: #0a1a3a;
--ffh-bg-overlay: rgba(0, 0, 0, 0.7);
--ffh-text: #f4f6fa;
--ffh-text-soft: #c7d2e0;
--ffh-text-muted: #94a2b8;
--ffh-text-on-navy: #ffffff;
--ffh-border: rgba(255, 255, 255, 0.12);
--ffh-border-strong: rgba(255, 255, 255, 0.24);
--ffh-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
--ffh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
--ffh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
--ffh-nav-bg: #050d24;
color-scheme: dark;
}
}
/* ── PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ── SMOOTH TRANSITION when theme toggles ── */
html[data-theme] body,
html[data-theme] .ffh-theme-aware {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* ═══════════════════════════════════════════════════════════════════
THEME TOGGLE WIDGET — drop into the profile dropdown on any page
Usage:
═══════════════════════════════════════════════════════════════════ */
.ffh-theme-toggle {
display: inline-flex;
background: var(--ffh-bg-sunken);
border: 1px solid var(--ffh-border);
border-radius: 999px;
padding: 3px;
gap: 2px;
}
.ffh-theme-toggle button {
background: transparent;
border: none;
width: 34px;
height: 28px;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ffh-text-soft);
transition: background 0.15s, color 0.15s;
padding: 0;
}
.ffh-theme-toggle button:hover {
color: var(--ffh-text);
}
.ffh-theme-toggle button[aria-pressed="true"] {
background: var(--ffh-orange);
color: #fff;
box-shadow: 0 2px 6px rgba(232, 69, 10, 0.35);
}