/* ===================================================================
 * VPH DESIGN TOKENS — CSS custom-property fallback values.
 *
 * Live values are injected via wp_add_inline_style in assets.php from
 * PHP constants. This file provides fallback defaults so the design
 * system works even if the inline injection is missing.
 * ================================================================ */
:root {
	--vph-color-primary:    #000000;
	--vph-color-secondary:  #FFFFFF;
	--vph-color-accent:     #4999D0;
	--vph-color-accent-dark: #2d6fa3;
	--vph-color-accent-tint: rgba(73,153,208,0.08);
	--vph-color-hover:      #4999D0;
	--vph-header-bg:        #000000;
	--vph-header-text:      #FFFFFF;
	--vph-header-text-dim:  rgba(255,255,255,0.72);
	--vph-header-border:    rgba(255,255,255,0.08);
	--vph-font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	/* Override Avanam font CSS vars sitewide so Inter reaches every
	   text element (hero H1, body, footer, headings). Avanam emits
	   these via its own inline :root block in wp_head; the !important
	   rule wins regardless of cascade order. */
	--global-heading-font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	--global-body-font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	--global-primary-nav-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	--global-fallback-font:           sans-serif !important;
	--vph-nav-size:         14px;
	--vph-nav-weight:       600;
	--vph-nav-tracking:     0.2px;
	--vph-nav-pad-y:        30px;
	--vph-nav-pad-x:        14px;
	--vph-topbar-size:      13px;
	--vph-breadcrumb-hero:  url("/wp-content/uploads/vph-breadcrumb-hero.webp");
	/* Text-color tokens for demo-day normalization. */
	--vph-text-heading: #111111;
	--vph-text-body:    #444444;
	--vph-text-muted:   #666666;
	--vph-bg-page:      #ffffff;
	/* Home / service visual parity tokens. */
	--vph-bg-alt:            #f9f9fb;
	--vph-card-shadow:       0 2px 8px rgba(0,0,0,.06);
	--vph-space-card:        32px 28px;
	--vph-space-card-mobile: 24px 22px;
}

/* ===================================================================
 * BRAND PALETTE OVERRIDE — monochrome with blue interaction accent.
 *
 * Avanam/TemplateMela ships its own CSS custom properties via inline
 * <style> in wp_head. The demo sets --global-palette1 to #ffb600
 * (yellow), which cascades into button bgs, breadcrumb hovers, the
 * scroll-up button, and derived palette vars.
 *
 * VPH palette:
 *   palette1 = #000 (dominant, replaces yellow)
 *   palette-highlight = accent blue (link hover + active)
 *   palette-btn-bg = accent blue, palette-btn-bg-hover = #000
 *   palette-btn = #fff (text on buttons)
 * ================================================================ */
:root {
	--global-palette1: #000000 !important;
	--global-palette-highlight: var(--vph-color-accent) !important;
	--global-palette-highlight-alt: var(--vph-color-accent) !important;
	--global-palette-btn-bg: var(--vph-color-accent) !important;
	--global-palette-btn-bg-hover: #000000 !important;
	--global-palette-btn: #ffffff !important;
	--global-palette-btn-hover: #ffffff !important;
}