/*
 * DetailerOffice — global styles (loaded site-wide).
 *
 * Contains the design tokens (CSS custom properties), the shared button and
 * container components, the wordmark and baseline accessibility helpers.
 * Everything is namespaced with `do-` / `detaileroffice-` so it will not clash
 * with Customify or plugin styles.
 */

:root {
	/* Backgrounds */
	--do-bg: #FFFDF9;
	--do-bg-warm: #F8F4ED;

	/* Navy */
	--do-navy: #18324A;
	--do-navy-dark: #102536;

	/* Primary blue */
	--do-blue: #2D6CDF;
	--do-blue-hover: #2358B7;

	/* Text */
	--do-text: #1C2733;
	--do-text-2: #43515F;
	--do-muted: #6E7B86;

	/* Secondary text on dark navy backgrounds (higher contrast for legibility) */
	--do-on-dark: #E8EEF5;

	/* Lines + accents */
	--do-border: #E5DFD5;
	--do-green: #26845E;
	--do-yellow: #F6D365;

	/* Layout */
	--do-container: 1120px;
	--do-gutter: clamp(1rem, 4vw, 2.5rem);
	--do-radius: 6px;

	/* Type stacks: system sans for body, native serif for major headings */
	--do-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--do-serif: Georgia, Cambria, "Times New Roman", Times, serif;
}

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

/* ---------- Wordmark ---------- */
.do-wordmark {
	font-family: var(--do-serif);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}
.do-wordmark__a { color: var(--do-navy); }
.do-wordmark__b { color: var(--do-blue); }

/* ---------- Eyebrow ---------- */
.do-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--do-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--do-blue);
}
.do-eyebrow--light { color: var(--do-yellow); }

/* ---------- Buttons ---------- */
.do-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--do-radius);
	font-family: var(--do-sans);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.do-btn--primary {
	background: var(--do-blue);
	color: #fff;
}
.do-btn--primary:hover,
.do-btn--primary:focus-visible {
	background: var(--do-blue-hover);
	color: #fff;
}
.do-btn--ghost {
	background: transparent;
	color: var(--do-navy);
	border-color: var(--do-border);
}
.do-btn--ghost:hover,
.do-btn--ghost:focus-visible {
	background: var(--do-bg-warm);
	color: var(--do-navy);
	border-color: var(--do-navy);
}
.do-btn--yellow {
	background: var(--do-yellow);
	color: var(--do-navy-dark);
}
.do-btn--yellow:hover,
.do-btn--yellow:focus-visible {
	background: #f2c53f;
	color: var(--do-navy-dark);
}
.do-btn--lg {
	padding: 0.95rem 1.75rem;
	font-size: 1.05rem;
}

/* ---------- Accessibility: visible keyboard focus ---------- */
.detaileroffice-home a:focus-visible,
.detaileroffice-home button:focus-visible,
.do-btn:focus-visible {
	outline: 3px solid var(--do-blue);
	outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.detaileroffice-home *,
	.do-btn {
		transition: none !important;
		animation: none !important;
	}
}