/* =========================================================================
   Twinco design tokens — ported verbatim from the Next.js source
   (nextjs/app/globals.css @theme block). Namespaced with --twinco-* so they
   never collide with the active WordPress theme or Elementor globals.
   ========================================================================= */

/* ---- Self-hosted variable fonts ---- */
@font-face {
	font-family: "Afacad";
	src: url("../fonts/Afacad-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Afacad";
	src: url("../fonts/Afacad-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-VariableFont.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Italic-VariableFont.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* ---- Fonts ---- */
	--twinco-font-sans: "Afacad", system-ui, -apple-system, "Segoe UI", sans-serif;
	--twinco-font-inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* ---- Color palette (@theme tokens) ---- */
	--twinco-navy: #021b79;
	--twinco-blue: #147bfe;
	--twinco-cyan: #68e8ff;
	--twinco-sky: #96c4ff;
	--twinco-steel: #3c90c5;
	--twinco-gold: #ffde8a;
	--twinco-cream: #fff7e1;
	--twinco-mist: #f4f9ff;
	--twinco-surface: #f8f9fc;
	--twinco-ash: #656565;
	--twinco-silver: #d5d5d5;
	--twinco-mute: #d7d7d7;
	--twinco-ink: #00082d;
	--twinco-fog: #c7c7c7;
	--twinco-jet: #050708;
	--twinco-slate: #383838;

	/* ---- Inline-only colors surfaced across components ---- */
	--twinco-navy2: #0a1230;
	--twinco-ice: #dcebfc;
	--twinco-blue2: #559fff;
	--twinco-sand: #fad282;
	--twinco-aqua: #b8faff;
	--twinco-paper: #fafafa;
	--twinco-line: #e1e1e1;
	--twinco-placeholder: #e9e9e9;
	--twinco-gray: #5e5e5e;

	/* ---- Type scale (fluid clamp() headings, fixed small sizes) ---- */
	--twinco-text-display: clamp(40px, 6.25vw, 80px);
	--twinco-text-hero: clamp(34px, 5.47vw, 70px);
	--twinco-text-h1: clamp(30px, 4.7vw, 60px);
	--twinco-text-metric: clamp(30px, 3.6vw, 46px);
	--twinco-text-title: 24px;
	--twinco-text-button: 18px;
	--twinco-text-body: 16px;
	--twinco-text-label: 14px;

	/* ---- Radii ---- */
	--twinco-radius-card: 32px;
	--twinco-radius-pill: 100px;
}

/* =========================================================================
   Shared effect utilities (ported from globals.css)
   ========================================================================= */

/* Signature navy→cyan brand gradient. Angle overridable via --brand-angle. */
.twinco-brand-gradient {
	background-image: linear-gradient(
		var(--brand-angle, 115.721deg),
		var(--twinco-navy) 8.8727%,
		var(--twinco-cyan) 104.61%
	);
}

/* White glow on hero / section headings. */
.twinco-text-glow {
	text-shadow: 6px 6px 16px rgba(255, 255, 255, 0.25);
}

/* Scroll reveal — twinco-reveal.js adds .is-in when the element enters view. */
.twinco-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out;
	transition-delay: var(--twinco-reveal-delay, 0ms);
}
.twinco-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Content crossfade (carousel / tab switches). */
@keyframes twinco-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.twinco-fade-in {
	animation: twinco-fade-in 0.35s ease-out;
}

/* Card lift on hover. */
.twinco-hover-lift {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.twinco-reveal,
	.twinco-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.twinco-fade-in {
		animation: none;
	}
}

/* =========================================================================
   Scoped reset — every Twinco widget root carries `.twinco-w`. These rules use
   real specificity (element + class = 0,1,1) so they win over block-theme and
   Elementor element styles that a bare :where() reset would lose to. Verified
   necessary while building the Hero (theme line-height / margins / letter-spacing
   and Elementor's `.elementor img{height:auto}` were bleeding in).
   NOTE: line-height is deliberately NOT reset here — each widget sets its own to
   match the source's per-element leading.
   ========================================================================= */
.twinco-w,
.twinco-w *,
.twinco-w *::before,
.twinco-w *::after {
	box-sizing: border-box;
}
/* Clip horizontal bleed of decorative glows/swirls to the section root so they can't
   trigger page-level horizontal scroll on mobile (matches the Next sections' overflow).
   Root only — NOT descendants — and x-only so vertical bleeds (swirls) are preserved. */
.twinco-w {
	overflow-x: clip;
}
.twinco-w p,
.twinco-w h1,
.twinco-w h2,
.twinco-w h3,
.twinco-w h4,
.twinco-w h5,
.twinco-w h6,
.twinco-w ul,
.twinco-w ol,
.twinco-w li,
.twinco-w figure,
.twinco-w blockquote {
	margin: 0;
	padding: 0;
}
.twinco-w ul,
.twinco-w ol {
	list-style: none;
}
.twinco-w :is(p, h1, h2, h3, h4, h5, h6, a, span, li, button, input, label, div) {
	font-family: var(--twinco-font-sans);
	letter-spacing: normal;
	font-synthesis: none;
}
.twinco-w .font-inter,
.twinco-w .font-inter :is(span, a, strong, em, p) {
	font-family: var(--twinco-font-inter);
}
.twinco-w a {
	text-decoration: none;
}
.twinco-w button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.twinco-w img,
.twinco-w svg,
.twinco-w video {
	display: block;
}