/*
 * CASA R&E: design tokens (the ONLY place raw values live) + base styles.
 * Source: design-source/canvas/Main.dc.html (its stylesheet is the visual source of truth: palette, DM Serif Display +
 * DM Sans, split-arrow buttons, leaf sprigs). Three tiers (SOP §8): primitive -> semantic -> component. Mirrored in
 * theme.json. The --size-N scale is Main's pixel values by name, so components.css stays token-bound.
 */

/* ------------------------------------------------------------------ fonts (self-hosted, latin subset, OFL) */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/dm-sans-variable.woff2") format("woff2"); }

/* ------------------------------------------------------------------ tier 1: primitives (Main's palette) */
:root {
	--color-linen: #f3eee7;
	--color-linen-hover: #ece5db;
	--color-ivory: #faf8f4;
	--color-white: #ffffff;
	--color-sand: #e4dacd;
	--color-sand-deep: #d8ccbc;
	--color-sand-darker: #cbbca9;
	--color-walnut: #3b2e24;
	--color-walnut-raised: #4a3b2f;
	--color-walnut-hover: #56463a;
	--color-walnut-soft: #5e4c3e;
	--color-rust: #9a5b3c;
	--color-rust-dark: #7f4a30;
	--color-rust-darker: #6a3d27;
	--color-brown: #65523d;
	--color-brown-dark: #4f3f2e;
	--color-gold: #b08d57;
	--color-gold-light: #d4b98a;
	--color-ink: #29251f;
	--color-ink-muted: #675a4b;
	--color-taupe: #8e7c66;
	--color-red: #a13a2c;
	--color-red-soft: #f7e6e2;
	--color-blue: #2e5c7e;
	--color-blue-soft: #e3ecf3;
	--color-ivory-alpha-94: rgba(250, 248, 244, 0.94);
	--color-ink-alpha-08: rgba(41, 37, 31, 0.08);
	--color-ink-alpha-12: rgba(41, 37, 31, 0.12);
	--color-ink-alpha-14: rgba(41, 37, 31, 0.14);
	--color-ink-alpha-16: rgba(41, 37, 31, 0.16);

	--font-family-display: "DM Serif Display", Georgia, serif;
	--font-family-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* Main's pixel values, named by size */
	--size-1: 1px; --size-2: 2px; --size-3: 3px; --size-4: 4px; --size-6: 6px; --size-8: 8px; --size-10: 10px;
	--size-12: 12px; --size-13: 13px; --size-14: 14px; --size-15: 15px; --size-16: 16px; --size-17: 17px; --size-18: 18px;
	--size-19: 19px; --size-20: 20px; --size-21: 21px; --size-22: 22px; --size-23: 23px; --size-24: 24px; --size-25: 25px;
	--size-26: 26px; --size-27: 27px; --size-28: 28px; --size-29: 29px; --size-30: 30px; --size-31: 31px; --size-32: 32px;
	--size-34: 34px; --size-35: 35px; --size-36: 36px; --size-37: 37px; --size-38: 38px; --size-40: 40px; --size-42: 42px;
	--size-44: 44px; --size-46: 46px; --size-48: 48px; --size-49: 49px; --size-51: 51px; --size-52: 52px; --size-55: 55px;
	--size-56: 56px; --size-57: 57px; --size-60: 60px; --size-64: 64px; --size-65: 65px; --size-66: 66px; --size-70: 70px;
	--size-72: 72px; --size-76: 76px; --size-80: 80px; --size-84: 84px; --size-88: 88px; --size-90: 90px; --size-96: 96px;
	--size-104: 104px; --size-112: 112px; --size-120: 120px; --size-130: 130px; --size-132: 132px; --size-136: 136px;
	--size-140: 140px; --size-150: 150px; --size-161: 161px; --size-174: 174px; --size-180: 180px; --size-190: 190px;
	--size-200: 200px; --size-220: 220px; --size-230: 230px; --size-240: 240px; --size-241: 241px; --size-254: 254px;
	--size-260: 260px; --size-268: 268px; --size-280: 280px; --size-300: 300px; --size-308: 308px; --size-340: 340px;
	--size-360: 360px; --size-390: 390px; --size-480: 480px; --size-560: 560px; --size-680: 680px; --size-760: 760px; --size-1296: 1296px;
	--size-1440: 1440px; --size-9999: 9999px;

	--radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-14: 14px;
	--radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-pill: 999px;

	--duration-base: 180ms;
	--duration-slow: 400ms;
	--ease: ease-out;
	--tracking-tight: -0.015em;
	--tracking-snug: -0.01em;
}

/* ------------------------------------------------------------------ tier 2: semantic (roles) */
:root {
	--color-bg: var(--color-linen);
	--color-surface: var(--color-white);
	--color-card: var(--color-ivory);
	--color-tint: var(--color-sand);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-ink-muted);
	--color-primary: var(--color-brown);
	--color-primary-hover: var(--color-brown-dark);
	--color-action: var(--color-rust);
	--color-action-hover: var(--color-rust-dark);
	--color-dark: var(--color-walnut);
	--color-dark-raised: var(--color-walnut-raised);
	--color-on-dark: var(--color-linen);
	--color-on-dark-muted: var(--color-sand);
	--color-accent-on-dark: var(--color-gold-light);
	--color-leaf: var(--color-brown);
	--color-leaf-gold: var(--color-gold);
	--color-focus: var(--color-ink);
	--color-focus-on-dark: var(--color-linen);
	--color-error: var(--color-red);
	--color-error-soft: var(--color-red-soft);
	--color-info: var(--color-blue);
	--color-info-soft: var(--color-blue-soft);
	--color-input-line: var(--color-taupe);

	--shadow-panel: 0 var(--size-20) var(--size-48) var(--color-ink-alpha-16);
	--shadow-sheet: 0 var(--size-20) var(--size-48) var(--color-ink-alpha-12);
	--shadow-badge: 0 var(--size-12) var(--size-32) var(--color-ink-alpha-14);
	--shadow-up: 0 calc(-1 * var(--size-8)) var(--size-24) var(--color-ink-alpha-08);

	--font-display: var(--font-family-display);
	--font-sans: var(--font-family-sans);

	--text-body: var(--size-17);  --leading-body: var(--size-28);
	--text-sub: var(--size-18);   --leading-sub: var(--size-29);
	--text-small: var(--size-14); --leading-small: var(--size-22);

	--gutter: var(--size-48);
	--container-max: var(--size-1296);
	--measure: 36em;
	--measure-hero: 30em;
	--measure-faq: 38em;
	--measure-cta-title: 11em;
	--measure-cta: 28em;
	--measure-strap: 22em;
	--focus-width: var(--size-2);
	--focus-offset: var(--size-2);
	--sticky-cta-space: var(--size-76);
}

/* ------------------------------------------------------------------ tier 3: component tokens */
:root {
	--button-height: var(--size-56);
	--button-height-sm: var(--size-48);
	--button-radius: var(--radius-8);
	--button-bg: var(--color-action);
	--button-arrow-bg: var(--color-rust-dark);
	--button-bg-hover: var(--color-rust-dark);
	--button-arrow-bg-hover: var(--color-rust-darker);
	--button-text: var(--color-white);
	--button-soft-bg: var(--color-sand);
	--button-soft-arrow-bg: var(--color-sand-deep);
	--button-soft-arrow-bg-hover: var(--color-sand-darker);
	--button-soft-text: var(--color-ink);
	--button-soft-arrow-text: var(--color-brown);

	--logo-height: var(--size-84);
	--footer-logo-height: var(--size-104);
	--dropdown-width: var(--size-340);
	--badge-size: var(--size-136);
	--hero-media-ratio: 5 / 5.4;
	--card-ratio: 16 / 10;
	--gallery-row: var(--size-230);
	--section-y: var(--size-96);
	--panel-pad: var(--size-64);
}

@media (max-width: 1023px) {
	:root { --gutter: var(--size-32); --panel-pad: var(--size-40); --hero-media-ratio: 4 / 3; }
}
@media (max-width: 767px) {
	:root {
		--gutter: var(--size-16);
		--section-y: var(--size-56);
		--logo-height: var(--size-60);
		--badge-size: var(--size-112);
		--gallery-row: var(--size-150);
		--text-body: var(--size-16); --leading-body: var(--size-26);
	}
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	font-weight: var(--font-weight-regular);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--font-weight-regular); color: inherit; }
p { margin: 0 0 var(--size-16); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.is-dark :focus-visible { outline-color: var(--color-focus-on-dark); }
[hidden] { display: none !important; }

.casa-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; } /* allow-raw: visually-hidden pattern */
.casa-skip { position: absolute; left: var(--size-16); top: calc(-1 * var(--size-80)); z-index: 100; padding: var(--size-12) var(--size-16); background: var(--color-text); color: var(--color-on-dark); border-radius: var(--radius-6); font-weight: var(--font-weight-semibold); text-decoration: none; }
.casa-skip:focus { top: var(--size-16); color: var(--color-on-dark); }
main:focus { outline: none; }

.casa-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.casa-section { padding: var(--section-y) 0; }
.casa-section--flush-top { padding-top: 0; }
.casa-section--tight { padding: var(--size-48) 0; }
.casa-center { text-align: center; }

/* type helpers (Main .c-h2 / .c-sub / .c-p) */
.casa-h2 { margin: 0 0 var(--size-16); font: var(--font-weight-regular) var(--size-44)/var(--size-49) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--color-text); text-wrap: balance; }
.is-dark .casa-h2 { color: var(--color-on-dark); }
.casa-sub { margin: 0; font-size: var(--text-sub); line-height: var(--leading-sub); color: var(--color-text-muted); max-width: var(--measure); }
.is-dark .casa-sub { color: var(--color-on-dark-muted); }
.casa-center .casa-sub { margin: 0 auto; }
.casa-p { margin: 0 0 var(--size-16); max-width: var(--measure); }
.casa-small { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-text-muted); }
.casa-muted { color: var(--color-text-muted); }

@media (max-width: 767px) {
	.casa-h2 { font-size: var(--size-30); line-height: var(--size-37); }
}

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