/* ==========================================================================
SHARED BRAND TOKENS — my-bariatricbuddy.com + my-liveheartrate.com
--------------------------------------------------------------------------
One file, two sites. Edit here, deploy to both. Version 2.0.
Palette (taken from the Bariatric Buddy repo):
CREAMY WHITE #F7FAFC / #F8F7F4 = page + surface backgrounds
LIGHT BLUE #378ADD = primary. Links, nav, chrome, selection.
ORANGE #E8600A = the hint. Logo, primary CTAs, Barry,
the heart/ECG on the HR site.
Light mode only — dark mode removed.
This file MUST load BEFORE the child theme style.css — it defines every
--bb-* token the theme consumes.
Fonts (load once per site, in ):
========================================================================== */
:root {
/* ---- Core palette (theme-independent) -------------------------------- */
--brand-blue-900: #123A63;
--brand-blue-700: #1E5E9E; /* hover / dark text on blue tints */
--brand-blue-500: #378ADD; /* PRIMARY */
--brand-blue-300: #7BB5EA;
--brand-blue-200: #B5D4F2;
--brand-blue-100: #D8EAFB;
--brand-blue-050: #EEF6FF;
--brand-orange-900: #7A3205;
--brand-orange-700: #9B3E07;
--brand-orange-500: #E8600A; /* ACCENT — the hint of orange */
--brand-orange-300: #F5C9A8;
--brand-orange-100: #FDE8D5;
--brand-orange-050: #FFF4EE;
--brand-cream: #F7FAFC; /* page background — the creamy white */
--brand-cream-warm: #F8F7F4; /* alternate surface */
--brand-white: #FFFFFF;
--brand-ink: #1A1A1A;
--brand-ink-soft: #555550;
--brand-ink-muted: #888780;
/* Semantic (already used by the tools) */
--brand-success: #1D9E75;
--brand-warning: #EF9F27;
--brand-danger: #E24B4A;
/* ---- Typography ------------------------------------------------------- */
--brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--brand-font-mono: 'Consolas', 'Menlo', monospace;
/* ---- Shape & depth (the 10px standard) -------------------------------- */
--brand-radius-sm: 8px;
--brand-radius-md: 10px;
--brand-radius-lg: 10px;
--brand-radius-round: 50%;
--brand-shadow-sm: 0 1px 3px rgba(18, 58, 99, 0.10);
--brand-shadow-md: 0 4px 14px rgba(18, 58, 99, 0.12);
--brand-shadow-lg: 0 10px 30px rgba(18, 58, 99, 0.16);
/* ---- Layout & motion ---------------------------------------------------- */
--brand-max-width: 1160px;
--brand-ease: cubic-bezier(0.25, 0.6, 0.3, 1);
--brand-fast: 150ms;
--brand-slow: 350ms;
}
/* ==========================================================================
LIGHT THEME (default)
========================================================================== */
:root,
[data-theme="light"] {
--surface-page: var(--brand-cream);
--surface-card: var(--brand-white);
--surface-warm: var(--brand-cream-warm);
--surface-sunken: var(--brand-blue-050);
--surface-header: var(--brand-white);
--text-primary: var(--brand-ink);
--text-secondary: var(--brand-ink-soft);
--text-muted: var(--brand-ink-muted);
--text-inverse: var(--brand-white);
--text-link: var(--brand-blue-500);
--interactive-primary: var(--brand-blue-500);
--interactive-primary-hover: var(--brand-blue-700);
--interactive-accent: var(--brand-orange-500);
--interactive-accent-hover: var(--brand-orange-700);
--border-subtle: rgba(0,0,0,0.12);
--border-strong: rgba(0,0,0,0.2);
--focus-ring: var(--brand-blue-300);
/* ---- Bariatric Buddy theme tokens (consumed by style.css) ------------- */
/* Primary family — light blue chrome */
--bb-primary: var(--brand-blue-500);
--bb-primary-light: var(--brand-blue-050);
--bb-primary-mid: var(--brand-blue-100);
--bb-primary-border: var(--brand-blue-200);
--bb-primary-dark: var(--brand-blue-700);
--bb-primary-text: #174A7E;
/* Accent family — the hint of orange (logo, CTAs, Barry) */
--bb-accent: var(--brand-orange-500);
--bb-accent-light: var(--brand-orange-050);
--bb-accent-mid: var(--brand-orange-100);
--bb-accent-border: var(--brand-orange-300);
--bb-accent-dark: var(--brand-orange-700);
--bb-accent-text: var(--brand-orange-900);
/* Legacy aliases — tools.css, templates, and JS may still say "orange" */
--bb-orange: var(--bb-accent);
--bb-orange-light: var(--bb-accent-light);
--bb-orange-mid: var(--bb-accent-mid);
--bb-orange-border: var(--bb-accent-border);
--bb-orange-dark: var(--bb-accent-dark);
--bb-orange-text: var(--bb-accent-text);
--bb-text-primary: var(--text-primary);
--bb-text-secondary: var(--text-secondary);
--bb-text-muted: var(--text-muted);
--bb-border: var(--border-subtle);
--bb-border-mid: var(--border-strong);
--bb-bg-surface: var(--surface-warm);
--bb-bg-white: var(--surface-card);
--bb-bg-site: var(--surface-page);
--bb-radius-sm: var(--brand-radius-sm);
--bb-radius-md: var(--brand-radius-md);
--bb-radius-lg: var(--brand-radius-lg);
--bb-radius-xl: var(--brand-radius-lg);
--bb-font: var(--brand-font-body);
--bb-max-width: var(--brand-max-width);
}
/* ==========================================================================
SHARED COMPONENT BASELINE — used on the HR site and any non-WordPress page
========================================================================== */
.brand-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--brand-font-body);
font-weight: 600;
font-size: 15px;
padding: 10px 22px;
border-radius: var(--brand-radius-md);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--brand-fast) var(--brand-ease),
transform var(--brand-fast) var(--brand-ease),
box-shadow var(--brand-fast) var(--brand-ease);
}
.brand-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.brand-btn:hover { transform: translateY(-1px); box-shadow: var(--brand-shadow-sm); }
.brand-btn:active { transform: translateY(0); }
.brand-btn--primary {
background: var(--interactive-primary);
color: var(--text-inverse);
}
.brand-btn--primary:hover { background: var(--interactive-primary-hover); }
.brand-btn--accent {
background: var(--interactive-accent);
color: #FFFFFF;
}
.brand-btn--accent:hover { background: var(--interactive-accent-hover); }
.brand-btn--ghost {
background: transparent;
color: var(--text-link);
border-color: var(--border-strong);
}
.brand-btn--ghost:hover { background: var(--surface-sunken); }
.brand-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--brand-radius-md);
box-shadow: var(--brand-shadow-sm);
padding: 24px;
transition: box-shadow var(--brand-slow) var(--brand-ease),
transform var(--brand-slow) var(--brand-ease);
}
.brand-card--lift:hover {
box-shadow: var(--brand-shadow-md);
transform: translateY(-3px);
}
.brand-chip {
display: inline-block;
font-family: var(--brand-font-body);
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--brand-radius-md);
}
.brand-chip--blue { background: var(--bb-primary-light); color: var(--bb-primary-text); }
.brand-chip--orange { background: var(--bb-accent-light); color: var(--bb-accent-text); }
/* Accessibility floor */
@media (prefers-reduced-motion: reduce) {
.brand-btn, .brand-card { transition: none; }
.brand-btn:hover, .brand-card--lift:hover { transform: none; }
}