/* =========================================================================
   HomeRise — Global design tokens + base typography + buttons
   Scope: sitewide. Loaded on every page by homerise-blog child theme.
   Palette mirrors the staging blog template (WPCode snippet #2257 + #2259):
   teal as the anchor, gold as the CTA + accent, cream/mint as warm
   background tints. DM Sans everywhere.
   ========================================================================= */

:root {
	/* Teal — primary brand color (headers, H-tags, buttons-on-gold) */
	--hr-color-primary:      #042A32;  /* HomeRise deep teal */
	--hr-color-primary-ink:  #021A1F;  /* darker for hover */
	--hr-color-teal:         #042A32;  /* alias */
	--hr-color-teal-light:   #55A29C;  /* sage/teal for accents, "Updated" */

	/* Gold — used for eyebrows, links, price accents, stars.
	   NOTE: gold is NOT the CTA color. Green (see below) is the action color,
	   matching homerise.com home page. */
	--hr-color-accent:       #D4943A;  /* HomeRise gold */
	--hr-color-accent-ink:   #B37A28;  /* darker gold for hover */
	--hr-color-gold:         #D4943A;  /* alias */
	--hr-color-gold-light:   #E6B368;
	--hr-color-gold-bg:      #FDF4E3;  /* very light gold tint for chip/avatar ring */

	/* Green — primary CTA button color. Matches homerise.com home page pattern:
	   green fill, white text, dark-teal border. */
	--hr-color-cta:          #61CE70;
	--hr-color-cta-hover:    #4EB95E;  /* slightly deeper for hover */
	--hr-color-cta-border:   #042A32;  /* dark teal outline */

	/* Warm surfaces */
	--hr-color-cream:        #F8F3E8;
	--hr-color-mint-light:   #E8F4F2;
	--hr-color-border-warm:  #E8DCC4;
	--hr-color-border-teal:  #C8E0DD;

	/* Text */
	--hr-color-ink:          #1A2332;
	--hr-color-ink-soft:     #42526E;
	--hr-color-ink-mute:     #6B7786;
	--hr-color-text:         #334155;  /* body copy */
	--hr-color-text-body:    #334155;  /* alias */

	/* Surfaces + neutrals */
	--hr-color-white:        #FFFFFF;
	--hr-color-bg:           #FFFFFF;
	--hr-color-bg-soft:      #F8F9FA;
	--hr-color-bg-chip:      var(--hr-color-gold-bg);
	--hr-color-gray-50:      #F8F9FA;
	--hr-color-gray-100:     #F1F3F5;
	--hr-color-gray-200:     #E9ECEF;
	--hr-color-gray-300:     #DEE2E6;
	--hr-color-gray-500:     #6B7786;
	--hr-color-gray-600:     #495057;
	--hr-color-gray-700:     #343A40;
	--hr-color-gray-800:     #212529;
	--hr-color-border:       #E9ECEF;
	--hr-color-border-soft:  #F1F3F5;

	--hr-color-success:      #2D8A3E;
	--hr-color-warn:         #B8860B;

	/* Breakpoints (for reference — use in @media) */
	--hr-bp-sm:  480px;
	--hr-bp-md:  768px;
	--hr-bp-lg:  1024px;
	--hr-bp-xl:  1280px;
	--hr-bp-2xl: 1440px;

	/* Fluid type scale — tightened ranges so headings don't overshoot on wide
	   screens. Modular-scale-ish (ratio ~1.2). Hero/3xl are dedicated h1 sizes;
	   2xl is for big in-content breaks, xl for section h2, lg for h3. */
	--hr-fs-xs:    clamp(0.75rem,    0.72rem + 0.15vw,  0.8125rem);
	--hr-fs-sm:    clamp(0.875rem,   0.85rem + 0.15vw,  0.9375rem);
	--hr-fs-base:  clamp(1rem,       0.97rem + 0.2vw,   1.0625rem);
	--hr-fs-lg:    clamp(1.125rem,   1.08rem + 0.25vw,  1.25rem);
	--hr-fs-xl:    clamp(1.3125rem,  1.23rem + 0.45vw,  1.5rem);
	--hr-fs-2xl:   clamp(1.5rem,     1.35rem + 0.75vw,  1.875rem);
	--hr-fs-3xl:   clamp(1.875rem,   1.62rem + 1.25vw,  2.5rem);
	--hr-fs-hero:  clamp(2.25rem,    1.85rem + 2vw,     3.25rem);

	/* Spacing (fluid-ish) */
	--hr-sp-1:  0.25rem;
	--hr-sp-2:  0.5rem;
	--hr-sp-3:  0.75rem;
	--hr-sp-4:  1rem;
	--hr-sp-5:  1.25rem;
	--hr-sp-6:  1.5rem;
	--hr-sp-8:  2rem;
	--hr-sp-10: 2.5rem;
	--hr-sp-12: 3rem;
	--hr-sp-16: 4rem;

	/* Radii */
	--hr-radius-sm: 6px;
	--hr-radius-md: 10px;
	--hr-radius-lg: 14px;
	--hr-radius-xl: 20px;
	--hr-radius-pill: 999px;

	/* Shadows */
	--hr-shadow-sm: 0 1px 2px rgba(15,26,42,0.06), 0 1px 1px rgba(15,26,42,0.04);
	--hr-shadow-md: 0 6px 20px rgba(15,26,42,0.08);
	--hr-shadow-lg: 0 12px 40px rgba(15,26,42,0.12);

	/* Content widths */
	--hr-content-w:  min(100% - 2rem, 740px);
	--hr-wide-w:     min(100% - 2rem, 1100px);

	/* Focus ring — keyed to the green CTA so it reads as "action". */
	--hr-focus: 0 0 0 3px rgba(97,206,112,0.45);

	/* Fonts — DM Sans matches the staging blog template. Fallback to system
	   sans so there's no FOIT if DM Sans hasn't loaded yet. */
	--hr-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hr-font-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base reset, scoped to pages that opt in via .hr-blog or .hr-page.
   This avoids stomping on Elementor-controlled pages during migration. */
.hr-blog,
.hr-page {
	box-sizing: border-box;
	color: var(--hr-color-text);
	font-family: var(--hr-font-sans);
	font-size: var(--hr-fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hr-blog *,
.hr-blog *::before,
.hr-blog *::after,
.hr-page *,
.hr-page *::before,
.hr-page *::after {
	box-sizing: border-box;
}

/* Buttons — reusable sitewide. Primary = gold on teal text (staging pattern). */
.hr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	min-width: 48px;
	padding: 0.875rem 1.75rem;
	font: 600 var(--hr-fs-base)/1.1 var(--hr-font-sans);
	text-decoration: none;
	border-radius: var(--hr-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.hr-btn:focus-visible { outline: none; box-shadow: var(--hr-focus); }
.hr-btn:active { transform: translateY(1px); }

.hr-btn--primary {
	background: var(--hr-color-cta);
	color: #fff;
	border-color: var(--hr-color-cta-border);
}
.hr-btn--primary:hover {
	background: var(--hr-color-cta-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(4,42,50,0.18);
}

.hr-btn--secondary {
	background: var(--hr-color-teal);
	color: #fff;
}
.hr-btn--secondary:hover { background: var(--hr-color-primary-ink); }

.hr-btn--ghost {
	background: transparent;
	color: var(--hr-color-teal);
	border-color: currentColor;
}
.hr-btn--ghost:hover { background: var(--hr-color-bg-soft); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hr-btn, .hr-btn * { transition: none !important; animation: none !important; }
}