/*
 * Dee Valley Locksmiths - brand tokens.
 *
 * Plain, hand-written CSS (a compiled/static asset - no CDN, no build
 * step needed for this file). Overrides the neutral placeholder custom
 * properties the qb-locksmith parent's compiled Tailwind stylesheet
 * defines, so every bg-brand, text-brand and fill-brand utilities the
 * parent's markup already uses resolves to Dee Valley's real palette.
 * Enqueued with a dependency on the parent's stylesheet handle, so this
 * always loads after it (see functions.php).
 */

:root {
	--color-brand-green-900: #0A2B1E;
	--color-brand-green-800: #0F3D2E;
	--color-brand-green-700: #155C43;
	--color-brand-green-600: #1C7A5A;
	--color-brand-green-500: #228C6A;

	--color-brand-gold-600: #A07C10;
	--color-brand-gold-500: #C9A227;
	--color-brand-gold-400: #D9B445;
	--color-brand-gold-300: #E8CB72;

	--color-brand-cream: #FBF8F1;

	/*
	 * Focus-ring colour - Dee Valley's CTA gold doubles as its
	 * focus-visible outline colour. Declared explicitly (not left to
	 * inherit the parent's chained default) so this file stays a
	 * complete, self-contained record of the full brand contract - see
	 * brand.md.
	 */
	--color-focus-ring: #C9A227;

	--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

	/*
	 * Display and utility font slots - the same typefaces already used by
	 * the inline SVG wordmark below (dvl-logo-serif, dvl-logo-utility),
	 * now also available as ordinary font-display and font-utility
	 * Tailwind utilities for any other heading or tracked-label content
	 * (e.g. the living style guide). The logo classes keep their own
	 * fixed size and letter-spacing; these two tokens only carry the
	 * typeface itself.
	 *
	 * Known limitation: the Google Fonts request below (see functions.php)
	 * only loads Playfair Display at weight 700 and Montserrat at weight
	 * 600. Anything set in font-display/font-utility should stick to
	 * font-bold and font-semibold respectively to match the loaded
	 * weights - a heavier request (e.g. extrabold) will render as a
	 * browser-synthesised bold, not a true design weight.
	 */
	--font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
	--font-utility: 'Montserrat', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

	/*
	 * Card shadows - identical to the qb-locksmith parent's neutral
	 * default (shadows are brand-neutral, not colour-specific). Declared
	 * explicitly, not left implicit, so this file stays a complete record
	 * of the full token contract rather than silently relying on parent
	 * values Dee Valley happens to match.
	 */
	--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
	--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.13);
}

/*
 * Header/hero/footer wordmark typography - used by the inline SVG logo
 * variants in functions.php (dee_valley_logo_markup). Kept as classes
 * (not inline style attributes) so the SVG stays free of style="" per
 * project convention. Letter-spacing is shared across all three
 * placements (the design's own header/hero/footer values differ by only
 * 0.01-0.03em - imperceptible at this font size, so one shared class
 * covers all three rather than three near-duplicate variants).
 */
.dvl-logo-serif {
	font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.dvl-logo-utility {
	font-family: 'Montserrat', 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.22em;
}

.dvl-logo-fill-green {
	fill: var(--color-brand-green-800);
}

.dvl-logo-fill-gold {
	fill: var(--color-brand-gold-500);
}

.dvl-logo-stroke-gold {
	stroke: var(--color-brand-gold-500);
	fill: none;
}

/*
 * Gradient stops for the hero wordmark's "LOCKSMITHS" fill
 * (<linearGradient id="heroLogoGold">` in functions.php). stop-color is a
 * standard SVG/CSS property; targeting it via a class keeps the SVG
 * free of inline style="" the same way the flat-fill classes above do.
 */
.dvl-logo-stop-light {
	stop-color: var(--color-brand-gold-300);
}

.dvl-logo-stop-mid {
	stop-color: var(--color-brand-gold-500);
}

.dvl-logo-stop-dark {
	stop-color: var(--color-brand-gold-600);
}