/*
Theme Name: Yardlumi
Theme URI: https://github.com/lokki007/yardluma-commerce
Description: Storefront theme for a parcel-only home and outdoor catalog. Hand-built: no page builder, no framework, self-hosted fonts, WooCommerce for cart and checkout.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary — project owned
Text Domain: yardluma
*/

/* ---------------------------------------------------------------------------
   1. Fonts (self-hosted, variable, no third-party requests)
   ------------------------------------------------------------------------ */
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------------------ */
:root {
	--paper: #f7f4ee;
	--paper-tint: #efeade;
	--surface: #ffffff;
	--ink: #1b211c;
	--ink-soft: #4b544c;
	--pine: #33503e;
	--pine-deep: #16231b;
	--sage: #8fa08b;
	--stone: #dcd5c7;
	--clay: #b4653d;
	--line: color-mix(in oklab, var(--ink) 14%, transparent);
	--line-soft: color-mix(in oklab, var(--ink) 8%, transparent);

	--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.06rem);
	--step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
	--step-2: clamp(1.4rem, 1.2rem + 0.95vw, 1.95rem);
	--step-3: clamp(1.75rem, 1.35rem + 1.9vw, 2.9rem);
	--step-4: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);
	--step-5: clamp(2.9rem, 1.6rem + 6vw, 6.2rem);

	--wrap: 1360px;
	--gut: clamp(1.1rem, 0.5rem + 2.4vw, 2.6rem);
	--section: clamp(3.6rem, 2.2rem + 5vw, 7.5rem);
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent), 0 14px 34px -18px color-mix(in oklab, var(--ink) 26%, transparent);
	--shadow-lift: 0 2px 4px color-mix(in oklab, var(--ink) 7%, transparent), 0 26px 60px -26px color-mix(in oklab, var(--ink) 34%, transparent);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* ---------------------------------------------------------------------------
   3. Reset + base
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0 0 0.5em;
	text-wrap: balance;
	font-variation-settings: 'opsz' 84;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0 0 1em; padding-left: 1.1em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--paper-tint); padding: 0.1em 0.35em; border-radius: 5px; }

:focus-visible {
	outline: 2px solid var(--pine);
	outline-offset: 3px;
	border-radius: 4px;
}

.yl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.yl-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.yl-main { display: block; }

/* Scroll-reveal: CSS-only, progressive. Browsers without scroll-driven
   animations simply render everything visible. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.yl-card, .yl-need, .yl-collection, .yl-panel, .yl-editorial__media, .yl-editorial__body {
			animation: yl-rise linear both;
			animation-timeline: view();
			animation-range: entry 6% cover 26%;
		}
		@keyframes yl-rise {
			from { opacity: 0; translate: 0 22px; }
			to { opacity: 1; translate: 0 0; }
		}
	}
}