/* ==========================================================================
   QSHD design system — global tokens, base reset, and shared component classes.
   Hand-authored static CSS (no build step). Enqueued on the front end via
   inc/enqueue.php and in the block editor via add_editor_style() in inc/setup.php.
   Per-block .scss files consume the --qs-* custom properties defined here.
   Source of truth: designs/qsha/index.html (:root tokens + shared helpers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens (brand sampled from the Quick Shift logo)
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--qs-blue:        #1689d6;
	--qs-blue-600:    #1175bd;   /* text/links on light */
	--qs-blue-700:    #0f659f;
	--qs-blue-400:    #38a9ef;   /* accent on dark */
	--qs-blue-050:    #eaf4fc;
	--qs-steel:       #3a434d;

	/* Dark accent surfaces */
	--qs-ink:         #0c1116;
	--qs-ink-800:     #11181f;
	--qs-ink-700:     #161f27;
	--qs-ink-600:     #1c2730;

	/* Light surfaces (primary) */
	--qs-white:       #ffffff;
	--qs-paper:       #f4f6f9;
	--qs-paper-200:   #eaeef3;

	/* Text */
	--qs-text:        #e9eef3;   /* on dark */
	--qs-muted:       #9aa7b3;   /* on dark */
	--qs-ink-text:    #16202a;   /* on light (primary) */
	--qs-ink-muted:   #54616d;   /* on light (secondary) */

	/* Lines / effects */
	--qs-line:        rgba(255, 255, 255, .10);
	--qs-line-strong: rgba(255, 255, 255, .18);
	--qs-line-ink:    #e3e8ee;
	--qs-line-ink-2:  #d2dae2;
	--qs-card-shadow: 0 18px 44px -26px rgba(16, 28, 40, .30);
	--qs-shadow-dark: 0 24px 60px -24px rgba(0, 0, 0, .7);

	--qs-r:           14px;
	--qs-r-sm:        9px;
	--qs-container:   1200px;
	--qs-pad:         clamp(20px, 5vw, 40px);

	--qs-font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
	--qs-font-body:    "Inter", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
	margin: 0;
	font-family: var(--qs-font-body);
	background: var(--qs-white);
	color: var(--qs-ink-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.qs-container {
	width: 100%;
	max-width: var(--qs-container);
	margin-inline: auto;
	padding-inline: var(--qs-pad);
}

.qs-section {
	padding-block: clamp(64px, 9vw, 116px);
	position: relative;
}

/* --------------------------------------------------------------------------
   Shared text helpers
   -------------------------------------------------------------------------- */
.qs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--qs-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--qs-blue-600);
	margin: 0 0 18px;
}
.qs-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--qs-blue);
	display: inline-block;
}
.qs-eyebrow--on-dark { color: var(--qs-blue-400); }

.qs-h2 {
	font-family: var(--qs-font-display);
	font-weight: 800;
	line-height: .98;
	letter-spacing: .01em;
	font-size: clamp(34px, 5.2vw, 58px);
	text-transform: uppercase;
	margin: 0;
}
.qs-h2 i,
.qs-h2 em { color: var(--qs-blue); font-style: italic; }

.qs-lead {
	color: var(--qs-ink-muted);
	font-size: clamp(16px, 1.4vw, 18px);
	max-width: 58ch;
}

/* diagonal "speed" stripe accent */
.qs-stripes {
	height: 6px;
	background: repeating-linear-gradient(115deg, var(--qs-blue) 0 12px, transparent 12px 26px);
	opacity: .9;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.qs-btn {
	--_bg: var(--qs-blue);
	--_fg: #fff;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--qs-font-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 15px 26px;
	border-radius: var(--qs-r-sm);
	border: 0;
	cursor: pointer;
	background: var(--_bg);
	color: var(--_fg);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	box-shadow: 0 12px 26px -12px rgba(22, 137, 214, .6);
}
.qs-btn svg { width: 18px; height: 18px; }
.qs-btn:hover {
	transform: translateY(-2px);
	background: var(--qs-blue-600);
	box-shadow: 0 18px 30px -12px rgba(22, 137, 214, .7);
}
.qs-btn--lg { padding: 18px 34px; font-size: 18px; }
.qs-btn--ghost {
	background: transparent;
	color: var(--qs-ink-text);
	border: 1.5px solid var(--qs-line-ink-2);
	box-shadow: none;
}
.qs-btn--ghost:hover {
	background: var(--qs-paper);
	border-color: var(--qs-blue);
	transform: translateY(-2px);
}
.qs-btn--on-dark.qs-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.qs-btn--on-dark.qs-btn--ghost:hover { background: rgba(255, 255, 255, .10); border-color: #fff; }
.qs-btn--block { width: 100%; justify-content: center; }