/**
 * Insole B2B — Export Precision design system.
 * Graphite ink + steel accent. Syne + Public Sans.
 *
 * @package Insole_B2B_Theme
 */

:root {
	/* ── Brand core ─────────────────────────────────────────────── */
	--b2b-primary: #0b1220;
	--b2b-primary-light: #151d2b;
	--b2b-primary-dark: #070b14;

	/* Steel accent */
	--b2b-accent: #3a7a8c;
	--b2b-accent-hover: #2e6574;
	--b2b-accent-light: #4a91a4;
	--b2b-accent-tint: rgba(58, 122, 140, 0.12);

	/* Accent on dark surfaces */
	--b2b-accent-on-dark: #9ec9d4;
	--b2b-accent-on-dark-hover: #d4e8ed;

	/* @deprecated — use --b2b-accent / --b2b-accent-on-dark */
	--b2b-gold: var(--b2b-accent);
	--b2b-gold-hover: var(--b2b-accent-hover);

	/* Form focus */
	--b2b-accent-blue: #3a7a8c;

	/* ── Text ───────────────────────────────────────────────────── */
	--b2b-text-dark: #121820;
	--b2b-text-muted: #8b96a8;
	--b2b-text: var(--b2b-text-dark);
	--b2b-body-muted: #5c6b7a;
	--b2b-muted: var(--b2b-text-muted);

	/* ── Surfaces ───────────────────────────────────────────────── */
	--b2b-white: #ffffff;
	--b2b-bg-light: #f3f5f7;
	--b2b-border: #dde3ea;

	/* ── Elevation & shape ────────────────────────────────────────── */
	--b2b-radius: 2px;
	--b2b-card-radius-sm: 2px;
	--b2b-shadow: 0 4px 24px rgba(11, 18, 32, 0.07);
	--b2b-shadow-hover: 0 12px 36px rgba(11, 18, 32, 0.12);

	/* ── Layout rhythm ──────────────────────────────────────────── */
	--b2b-section-y: clamp(5.5rem, 8vw, 7.5rem);
	--b2b-section-y-compact: clamp(4rem, 5vw, 5.5rem);
	--b2b-section-x: clamp(1.25rem, 4vw, 2rem);
	--b2b-container: 1180px;

	/* ── Typography ───────────────────────────────────────────────── */
	--b2b-font-display: "Syne", sans-serif;
	--b2b-font-body: "Public Sans", sans-serif;
	--b2b-h2-size: clamp(2.15rem, 3.6vw, 2.85rem);
	--b2b-desc-size: 1.05rem;
	--b2b-metric-size: clamp(2.25rem, 4.5vw, 3.25rem);

	/* ── Gradients ────────────────────────────────────────────────── */
	--b2b-gradient-hero: linear-gradient(
		160deg,
		#070b14 0%,
		#0b1220 42%,
		#151d2b 100%
	);
	--b2b-gradient-section: linear-gradient(
		160deg,
		var(--b2b-primary) 0%,
		var(--b2b-primary-light) 100%
	);
	--b2b-gradient-cta-band: linear-gradient(
		160deg,
		var(--b2b-primary-dark) 0%,
		#12202e 55%,
		var(--b2b-primary-light) 100%
	);
	--b2b-hero-glow: radial-gradient(
		ellipse 70% 55% at 78% 42%,
		rgba(58, 122, 140, 0.28) 0%,
		transparent 70%
	);

	/* ── CTA system ───────────────────────────────────────────────── */
	--b2b-cta-bg: var(--b2b-accent);
	--b2b-cta-bg-hover: var(--b2b-accent-hover);
	--b2b-cta-color: #ffffff;
	--b2b-cta-radius: var(--b2b-radius);
	--b2b-cta-padding-y: 0.85rem;
	--b2b-cta-padding-x: 1.65rem;
	--b2b-cta-font-size: 0.9rem;
	--b2b-cta-font-weight: 700;
	--b2b-cta-letter-spacing: 0.04em;

	--b2b-cta-on-dark-bg: var(--b2b-white);
	--b2b-cta-on-dark-color: var(--b2b-primary);
	--b2b-cta-on-dark-hover-bg: var(--b2b-accent-on-dark);
	--b2b-cta-on-dark-hover-color: var(--b2b-primary);

	/* Header chrome */
	--b2b-header-bg: #ffffff;
	--b2b-header-link: #121820;
	--b2b-header-link-hover: var(--b2b-accent);
	--b2b-header-border: var(--b2b-border);

	/* Motion */
	--b2b-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--b2b-duration: 0.55s;
}

/* Global type base on marketing surfaces */
body,
.site-content,
.insole-home,
.insole-page,
.insole-about,
.pdp-root,
.insole-b2b-modal {
	font-family: var(--b2b-font-body);
}

h1, h2, h3, h4,
.insole-b2b-section-title,
.insole-home__section-header h2,
.insole-page__section-header h2,
.insole-about__section-header h2,
.insole-home__hero-brand,
.insole-home__hero-title,
.pdp-info h1,
.insole-b2b-modal__title {
	font-family: var(--b2b-font-display);
}

/* ==========================================================================
   Unified primary CTA
   ========================================================================== */

.insole-b2b-quote-btn:not(.insole-b2b-nav-quote-btn),
.insole-home__btn--primary.insole-b2b-quote-btn,
.insole-page__btn.insole-b2b-quote-btn,
.insole-tech__cta-btn.insole-b2b-quote-btn,
.insole-about__cta-btn.insole-b2b-quote-btn,
.insole-product-simple__quote.insole-b2b-quote-btn,
.insole-b2b-product-card__detail-btn.insole-b2b-quote-btn,
.insole-b2b-form__submit {
	display: inline-block;
	padding: var(--b2b-cta-padding-y) var(--b2b-cta-padding-x);
	background: var(--b2b-cta-bg) !important;
	color: var(--b2b-cta-color) !important;
	border: 1px solid transparent !important;
	border-radius: var(--b2b-cta-radius);
	font-family: var(--b2b-font-body);
	font-size: var(--b2b-cta-font-size);
	font-weight: var(--b2b-cta-font-weight);
	letter-spacing: var(--b2b-cta-letter-spacing);
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	transition: background 0.25s var(--b2b-ease), color 0.25s ease, transform 0.2s var(--b2b-ease), box-shadow 0.25s ease;
}

.insole-b2b-quote-btn:not(.insole-b2b-nav-quote-btn):hover,
.insole-b2b-quote-btn:not(.insole-b2b-nav-quote-btn):focus,
.insole-b2b-form__submit:hover,
.insole-b2b-form__submit:focus {
	background: var(--b2b-cta-bg-hover) !important;
	color: var(--b2b-cta-color) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(58, 122, 140, 0.32);
}

.insole-home__cta .insole-b2b-quote-btn,
.insole-page__cta .insole-b2b-quote-btn,
.insole-about__cta .insole-b2b-quote-btn {
	background: var(--b2b-cta-on-dark-bg) !important;
	color: var(--b2b-cta-on-dark-color) !important;
}

.insole-home__cta .insole-b2b-quote-btn:hover,
.insole-page__cta .insole-b2b-quote-btn:hover,
.insole-about__cta .insole-b2b-quote-btn:hover {
	background: var(--b2b-cta-on-dark-hover-bg) !important;
	color: var(--b2b-cta-on-dark-hover-color) !important;
}

.insole-home__btn--primary:not(.insole-b2b-btn--whatsapp),
.insole-page__btn:not(.insole-b2b-btn--whatsapp):not(.insole-page__btn--link) {
	background: var(--b2b-cta-bg) !important;
	color: var(--b2b-cta-color) !important;
	border-radius: var(--b2b-cta-radius);
}

.insole-home__btn--primary:not(.insole-b2b-btn--whatsapp):hover,
.insole-page__btn:not(.insole-b2b-btn--whatsapp):hover {
	background: var(--b2b-cta-bg-hover) !important;
	color: var(--b2b-cta-color) !important;
}

.insole-b2b-btn--secondary {
	background: transparent !important;
	color: var(--b2b-white) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.insole-b2b-btn--whatsapp {
	background: #25d366 !important;
	color: var(--b2b-white) !important;
	text-transform: none;
	letter-spacing: 0.01em;
}

.insole-b2b-btn--whatsapp:hover {
	background: #1ebe57 !important;
}

.insole-page__btn.insole-b2b-btn--whatsapp {
	display: inline-block;
	padding: var(--b2b-cta-padding-y) var(--b2b-cta-padding-x);
	border: 1px solid transparent !important;
	border-radius: var(--b2b-cta-radius);
	font-size: var(--b2b-cta-font-size);
	font-weight: var(--b2b-cta-font-weight);
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.2s var(--b2b-ease), box-shadow 0.25s ease;
}

.insole-page__btn.insole-b2b-btn--whatsapp:hover,
.insole-page__btn.insole-b2b-btn--whatsapp:focus {
	color: var(--b2b-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}

.insole-home__hero .insole-home__btn--whatsapp,
.insole-home__hero .insole-b2b-btn--whatsapp {
	border: 1px solid transparent !important;
	border-radius: var(--b2b-cta-radius);
	font-size: var(--b2b-cta-font-size);
	font-weight: var(--b2b-cta-font-weight);
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	transition: background 0.25s ease, transform 0.2s var(--b2b-ease), box-shadow 0.25s ease;
}

.insole-home__hero .insole-home__btn--whatsapp:hover,
.insole-home__hero .insole-b2b-btn--whatsapp:hover {
	color: var(--b2b-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}

.insole-home__eyebrow,
.insole-page__eyebrow,
.insole-about .insole-home__eyebrow {
	color: var(--b2b-accent);
}

/* Scroll reveal */
.insole-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--b2b-duration) var(--b2b-ease), transform var(--b2b-duration) var(--b2b-ease);
}

.insole-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.insole-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.insole-b2b-quote-btn:not(.insole-b2b-nav-quote-btn):hover,
	.insole-b2b-form__submit:hover {
		transform: none;
	}
}