/* ==========================================================================
   Qelq — design tokens + scoped base
   Loaded before components.css (see inc/setup.php). Fonts are enqueued by PHP
   (Google Fonts: Space Grotesk 400/500/600, Source Sans 3 400/500/600).

   IMPORTANT: no global element resets here. Cartify pages that have not been
   rebuilt yet must look exactly as before, so every element default below is
   scoped to rebuilt Elementor content (.q-section / q- classes).
   ========================================================================== */

:root {
	/* Colour */
	--q-navy: #10233F;
	--q-ink: #010D30;
	--q-sand: #FCDFB0;
	--q-cream: #F6EBD5;        /* text on navy */
	--q-paper: #FDF3E1;        /* warm section bg */
	--q-stone: #F4EFE7;        /* image / product bg */
	--q-linen: #FBF8F2;
	--q-mist: #F7F4EE;
	--q-line: #E8E2D6;
	--q-border: #8A93A3;
	--q-muted: #4A5568;
	--q-body: #2B3A55;
	--q-body-2: #3A4760;
	--q-footer-muted: #C9CFDA;
	--q-tan: #EAD9B8;
	--q-white: #FFFFFF;

	/* Derived (measured from the design) */
	--q-line-dark: rgba(252, 223, 176, 0.22);   /* hairlines on navy */
	--q-dash-dark: rgba(252, 223, 176, 0.6);    /* dashed placeholders on navy */
	--q-hero-fade: rgba(1, 13, 48, 0.94);

	/* Type */
	--q-font-display: 'Space Grotesk', system-ui, sans-serif;
	--q-font-body: 'Source Sans 3', system-ui, sans-serif;

	/* Shape / layout */
	--q-radius: 4px;
	--q-maxw: 1280px;
	--q-gutter: 24px;
	--q-tap: 44px;             /* minimum touch target */
	--q-ctl-h: 52px;           /* buttons + form controls */

	/* Focus ring colour; switched to sand inside dark contexts */
	--q-focus: var(--q-navy);
	--q-ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 767px) {
	:root {
		--q-gutter: 16px;
	}
}

/* --------------------------------------------------------------------------
   Scoped base: rebuilt Elementor sections (section() adds .q-section) and
   any element that opts in with a q- class.
   -------------------------------------------------------------------------- */
.q-section {
	font-family: var(--q-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--q-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

.q-section *,
.q-section *::before,
.q-section *::after {
	box-sizing: border-box;
}

/* Dark context switches the focus ring to sand so it stays visible on navy. */
.q-dark,
.q-topbar {
	--q-focus: var(--q-sand);
}

.q-section ::selection {
	background: var(--q-sand);
	color: var(--q-navy);
}