/* ==========================================================================
   Triple D Ranch — base: design tokens, reset, typography
   Mobile-first. Breakpoint enhancements live in responsive.css.
   ========================================================================== */

:root {
	/* Colour */
	--color-bg: #f8f4ec;
	--color-bg-alt: #f2ece0;
	--color-bg-sage: #ecebdc;
	--color-card: #fffdf8;
	--color-text: #3a2a1e;
	--color-heading: #3b2316;
	--color-text-muted: #6b6055;
	--color-primary: #5b6447;
	--color-primary-hover: #474f36;
	--color-on-primary: #ffffff;
	--color-accent: #b68a4c;
	--color-accent-text: #87622f;
	--color-accent-soft: #eadcc1;
	--color-border: #e4dccd;
	--color-border-strong: #cfc3ae;
	--color-footer: #3f4232;
	--color-footer-text: #e8e2d2;
	--color-footer-muted: #b9b49f;
	--color-focus: #2f5d8a;

	/* Status tones */
	--tone-available-bg: #e3ead6;   --tone-available-fg: #44532b;
	--tone-pending-bg: #f6e6c6;     --tone-pending-fg: #7a5210;
	--tone-soon-bg: #e1ebf2;        --tone-soon-fg: #33556d;
	--tone-reserved-bg: #f0e2d4;    --tone-reserved-fg: #774826;
	--tone-keeping-bg: #e9e4f2;     --tone-keeping-fg: #54457a;
	--tone-adopted-bg: #ebe7e1;     --tone-adopted-fg: #5a534a;
	--tone-female-bg: #f7e2dd;      --tone-female-fg: #8b4233;
	--tone-male-bg: #e3e5f3;        --tone-male-fg: #424a7d;
	--tone-sample-bg: #fff1c2;      --tone-sample-fg: #634b00;

	/* Type */
	--font-serif: "Lora", Georgia, "Times New Roman", serif;
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-xs: 0.8125rem;
	--fs-eyebrow: 0.75rem;
	--fs-h1: clamp(2.5rem, 1.55rem + 3.9vw, 4.75rem);
	--fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
	--fs-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-page-title: clamp(2.3rem, 1.6rem + 2.8vw, 4rem);

	/* Space & shape */
	--container: 1320px;
	--gutter: 20px;
	--section-y: clamp(64px, 4rem + 4vw, 112px);
	--radius-sm: 6px;
	--radius: 8px;
	--radius-card: 14px;
	--shadow-card: 0 1px 2px rgba(58, 42, 30, 0.04), 0 10px 30px -12px rgba(58, 42, 30, 0.14);
	--shadow-card-hover: 0 2px 4px rgba(58, 42, 30, 0.05), 0 18px 40px -14px rgba(58, 42, 30, 0.22);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
:where(ul, ol)[class] { margin: 0; padding: 0; list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--color-heading);
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-hover); }
strong, b { font-weight: 600; }
small { font-size: var(--fs-xs); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.5rem 0; }

.tdr-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-text);
	margin: 0 0 0.85rem;
}
.tdr-muted { color: var(--color-text-muted); }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.tdr-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 1000;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--color-card);
	color: var(--color-heading);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	white-space: normal;
}
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}