/* ==========================================================================
   RMC DESIGN TOKENS — v3
   Premium / minimal / modern scientific.
   White dominant, navy as accent, copper used sparingly.
   ========================================================================== */

:root {
	/* Ink */
	--rmc-navy:          #17324D;   /* headings, primary ink, accent surfaces */
	--rmc-navy-hover:    #102538;
	--rmc-body:          #5A6472;   /* body copy */
	--rmc-muted:         #646E7C;   /* labels, meta, captions */
	--rmc-faint:         #6B7585;

	/* Copper — buttons, price, small highlights only */
	--rmc-accent:        #E0913D;
	--rmc-accent-hover:  #C87C2C;
	--rmc-accent-ink:    #FFFFFF;
	--rmc-accent-text:   #9A5A1A;   /* copper as small text on white */

	/* Surfaces */
	--rmc-white:         #FFFFFF;
	--rmc-surface:       #FBFCFD;   /* image beds, table headers */
	--rmc-line:          #E8EBEF;   /* every border on the site */
	--rmc-line-strong:   #D8DEE6;

	--rmc-success:       #1D7A4F;
	--rmc-danger:        #B3352F;

	/* Type */
	--rmc-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Shape — cards soft, controls crisp */
	--rmc-radius-card:   18px;
	--rmc-radius:        8px;
	--rmc-radius-sm:     8px;

	/* Elevation — soft only, never heavy */
	--rmc-shadow-sm: 0 1px 2px rgba(23, 50, 77, .04);
	--rmc-shadow:    0 2px 8px rgba(23, 50, 77, .05);
	--rmc-shadow-lg: 0 12px 32px rgba(23, 50, 77, .09);

	/* Rhythm — Apple/Stripe scale */
	--rmc-space-section: 96px;
	--rmc-space-block:   56px;
}

/* The RMC Product Experience plugin declares the old palette on
   .rmc-px-active, which outranks :root. Redeclare at matching specificity so
   the theme stays the single source of truth. */
html body.rmc-px-active,
html body.rmc-shop-active,
html body.woocommerce-account {
	--rmc-navy:          #17324D;
	--rmc-navy-hover:    #102538;
	--rmc-body:          #5A6472;
	--rmc-muted:         #646E7C;
	--rmc-faint:         #6B7585;
	--rmc-accent:        #E0913D;
	--rmc-accent-hover:  #C87C2C;
	--rmc-accent-ink:    #FFFFFF;
	--rmc-accent-text:   #9A5A1A;
	--rmc-white:         #FFFFFF;
	--rmc-surface:       #FBFCFD;
	--rmc-line:          #E8EBEF;
	--rmc-line-strong:   #D8DEE6;
	--rmc-radius-card:   18px;
	--rmc-radius:        8px;
	--rmc-radius-sm:     8px;
	--rmc-shadow-sm: 0 1px 2px rgba(23, 50, 77, .04);
	--rmc-shadow:    0 2px 8px rgba(23, 50, 77, .05);
	--rmc-shadow-lg: 0 12px 32px rgba(23, 50, 77, .09);
	--rmc-space-section: 96px;
	--rmc-space-block:   56px;
}

/* Astra palette bridge */
:root, html {
	--ast-global-color-0: var(--rmc-navy);
	--ast-global-color-1: var(--rmc-navy-hover);
	--ast-global-color-2: var(--rmc-navy);
	--ast-global-color-3: var(--rmc-body);
	--ast-global-color-4: var(--rmc-white);
	--ast-global-color-5: var(--rmc-surface);
	--ast-global-color-6: var(--rmc-line);
	--ast-global-color-7: var(--rmc-line-strong);
	--ast-global-color-8: var(--rmc-muted);
	--ast-border-color: var(--rmc-line);
}

/* Base typography. Colour on body only so containers can override. */
body:not(.woocommerce-checkout) {
	font-family: var(--rmc-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--rmc-body);
	-webkit-font-smoothing: antialiased;
}

body:not(.woocommerce-checkout) p,
body:not(.woocommerce-checkout) li {
	font-family: var(--rmc-font);
	line-height: 1.7;
	color: inherit;
}

/* Large, light headlines — premium rather than shouty */
body:not(.woocommerce-checkout) h1,
body:not(.woocommerce-checkout) h2,
body:not(.woocommerce-checkout) h3,
body:not(.woocommerce-checkout) h4,
body:not(.woocommerce-checkout) .elementor-heading-title,
body:not(.woocommerce-checkout) .entry-title {
	font-family: var(--rmc-font);
	color: var(--rmc-navy);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.1;
}

body:not(.woocommerce-checkout) h1 { font-size: 52px; }
body:not(.woocommerce-checkout) h2 { font-size: 36px; }
body:not(.woocommerce-checkout) h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
body:not(.woocommerce-checkout) h4 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 900px) {
	body:not(.woocommerce-checkout) h1 { font-size: 36px; }
	body:not(.woocommerce-checkout) h2 { font-size: 28px; }
	body:not(.woocommerce-checkout) h3 { font-size: 21px; }
}

/* Section label: thin copper rule + wide tracked caps */
.rmc-label,
.rmc-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--rmc-font);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rmc-muted);
}

.rmc-label::before,
.rmc-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--rmc-accent);
	flex: 0 0 auto;
}

/* ==========================================================================
   ELEMENTOR GLOBAL COLOR PIN (8.4.5, 2026-08-16)
   Live and stage had different Elementor Site Settings / Astra palettes
   (live still carried retired #20539E / #17387D / #0F172A / #E7F6FF), so the
   same imported homepage rendered blue on live and grey/white on stage.
   Elementor writes these as custom properties on body.elementor-kit-*; the
   theme is the single source of truth, so pin them to the values stage uses.
   Values = stage's kit + Astra palette as of go-live.
   ========================================================================== */
html body,
html body[class*="elementor-kit-"] {
	--e-global-color-primary:   #17324D !important;
	--e-global-color-secondary: #17324D !important;
	--e-global-color-text:      #5A6472 !important;
	--e-global-color-accent:    #E0913D !important;
	--e-global-color-astglobalcolor0: #1E2F5C !important;
	--e-global-color-astglobalcolor1: #16234A !important;
	--e-global-color-astglobalcolor2: #1E2F5C !important;
	--e-global-color-astglobalcolor3: #364151 !important;
	--e-global-color-astglobalcolor4: #FFFFFF !important;
	--e-global-color-astglobalcolor5: #FFFFFF !important;
	--e-global-color-astglobalcolor6: #070614 !important;
	--e-global-color-astglobalcolor7: #D1DAE5 !important;
	--e-global-color-astglobalcolor8: #222222 !important;
}