/* ========================================================= Wholesome Fitness, Homepage Tokens Light/dark via [data-theme]; vibe via [data-vibe]. Drop this in before home.css. ========================================================= */ @import url("./colors_and_type.css"); /* ---------- Light theme (default) ---------- */ :root, :root[data-theme="light"] { --page-bg: var(--wf-white); --page-fg: var(--wf-black); --surface: var(--wf-white); --surface-muted: var(--wf-gray-050); --surface-sunken: var(--wf-gray-100); --surface-inverse: var(--wf-black); --fg-strong: var(--wf-black); --fg-muted: var(--wf-gray-700); --fg-soft: var(--wf-gray-600); --fg-on-inverse: var(--wf-white); --border: var(--wf-gray-200); --border-strong: var(--wf-gray-300); --accent: var(--wf-blue); --accent-fg: var(--wf-white); --accent-hover: var(--wf-blue-700); --accent-soft: var(--wf-blue-050); --shadow-card: 0 2px 4px rgba(0,0,0,0.06); --shadow-card-hi: 0 6px 16px rgba(6, 67, 141, 0.10), 0 2px 4px rgba(0,0,0,0.04); --shadow-modal: 0 16px 32px rgba(6, 67, 141, 0.14), 0 4px 8px rgba(0,0,0,0.06); --header-bg: rgba(255,255,255,0.92); --header-border: var(--wf-gray-200); } /* ---------- Dark theme ---------- */ :root[data-theme="dark"] { --page-bg: #0B0E12; --page-fg: #F2F4F7; --surface: #11161C; --surface-muted: #161C24; --surface-sunken: #0B0E12; --surface-inverse: #F2F4F7; --fg-strong: #F8FAFC; --fg-muted: #B6BEC8; --fg-soft: #8A95A1; --fg-on-inverse: #0B0E12; --border: #1F2730; --border-strong: #2D343B; --accent: #5C8FD8; /* lifted blue for AA on dark */ --accent-fg: #0B0E12; --accent-hover: #7AA5DA; --accent-soft: rgba(92,143,216,0.12); --shadow-card: 0 2px 4px rgba(0,0,0,0.6); --shadow-card-hi: 0 6px 16px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.5); --shadow-modal: 0 16px 32px rgba(0,0,0,0.7); --header-bg: rgba(11,14,18,0.85); --header-border: #1F2730; } /* ========================================================= Vibes, same palette, different energy. Switch via [data-vibe="editorial" | "athletic" | "performance"] ========================================================= */ /* Editorial, generous whitespace, big restrained type, no italic accent. */ :root[data-vibe="editorial"] { --vibe-section-pad-y: 120px; --vibe-hero-pad-y: 140px; --vibe-hero-display: 96px; --vibe-hero-tracking: -0.03em; --vibe-hero-italic: normal; --vibe-hero-italic-color: var(--fg-strong); --vibe-cta-size: 16px; --vibe-cta-pad-y: 14px; --vibe-card-radius: 2px; --vibe-grid-gap: 32px; --vibe-band-bg: var(--surface-inverse); --vibe-band-fg: var(--fg-on-inverse); --vibe-stat-display: none; --vibe-eyebrow-spacing: 0.18em; } /* Athletic, denser, italic accent, prominent stat strip, bigger CTAs. (default) */ :root, :root[data-vibe="athletic"] { --vibe-section-pad-y: 88px; --vibe-hero-pad-y: 96px; --vibe-hero-display: 84px; --vibe-hero-tracking: -0.025em; --vibe-hero-italic: italic; --vibe-hero-italic-color: var(--accent); --vibe-cta-size: 18px; --vibe-cta-pad-y: 18px; --vibe-card-radius: 4px; --vibe-grid-gap: 20px; --vibe-band-bg: var(--accent); --vibe-band-fg: #fff; --vibe-stat-display: flex; --vibe-eyebrow-spacing: 0.12em; } /* Performance, data-forward, monospaced numerals, tighter cards, no italic. */ :root[data-vibe="performance"] { --vibe-section-pad-y: 72px; --vibe-hero-pad-y: 80px; --vibe-hero-display: 64px; --vibe-hero-tracking: -0.015em; --vibe-hero-italic: normal; --vibe-hero-italic-color: var(--fg-strong); --vibe-cta-size: 15px; --vibe-cta-pad-y: 12px; --vibe-card-radius: 2px; --vibe-grid-gap: 12px; --vibe-band-bg: var(--surface-inverse); --vibe-band-fg: var(--fg-on-inverse); --vibe-stat-display: grid; --vibe-eyebrow-spacing: 0.16em; }