/**
 * CASARA — design tokens.
 * Mirrors theme.json (palette, type scale, spacing). Source of truth for components:
 * components/layout/utilities must use these variables only — no raw hex.
 * Prefixes: --c-* colour, --f-* type, --s-* space, --l-* layout, --r-* radius,
 * --e-* easing, --d-* duration, --ratio-* image ratios, --z-* layers.
 * Fluid values are linear between 375px and 1440px viewport.
 */
:root {
	/* ---------- Colour: brand primitives ---------- */
	--c-ivory: #F7F5F0;
	--c-linen: #EFEBE3;
	--c-paper: #FBFAF7;
	--c-charcoal: #121212;
	--c-graphite: #1C1B19;
	--c-graphite-2: #2A2825;
	--c-stone: #66625A;        /* muted text on light — 5.57:1 on ivory */
	--c-warm-grey: #8B887F;    /* brand grey — muted text on dark 5.29:1; decorative on light */
	--c-mist: #B8B4AA;         /* secondary text on dark — 9.05:1 on charcoal */
	--c-border: #D8D4CA;
	--c-border-dark: #33312C;
	--c-bronze: #9A8262;       /* CASARA Bronze — accent. UI on ivory 3.36:1, text on charcoal 5.12:1 */
	--c-bronze-deep: #7D6748;  /* accent hover / accent text on light 4.93:1 */
	--c-champagne: #C2A983;    /* accent on dark 8.29:1 */
	--c-error: #9B4535;        /* 5.85:1 on ivory */
	--c-error-on-dark: #D69A8A;
	--c-success: #4F6146;      /* 6.16:1 on ivory */
	--c-success-on-dark: #A9B99A;
	--c-scrim: rgb(18 18 18 / 0.35); /* max overlay on photography */
	--c-scrim-soft: rgb(18 18 18 / 0.18);

	/* ---------- Colour: semantic (light context) ---------- */
	--c-bg: var(--c-ivory);
	--c-surface: var(--c-paper);
	--c-surface-alt: var(--c-linen);
	--c-text: var(--c-charcoal);
	--c-text-muted: var(--c-stone);
	--c-line: var(--c-border);
	--c-line-strong: var(--c-charcoal);
	--c-accent: var(--c-bronze);
	--c-accent-hover: var(--c-bronze-deep);
	--c-accent-text: var(--c-bronze-deep);
	--c-focus: var(--c-bronze-deep);
	--c-invalid: var(--c-error);
	--c-valid: var(--c-success);
	--c-btn-bg: var(--c-charcoal);
	--c-btn-text: var(--c-ivory);
	--c-btn-bg-hover: var(--c-graphite-2);

	/* ---------- Typography ---------- */
	--f-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
	--f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	--f-size-caption: clamp(0.6875rem, 0.6655rem + 0.0939vw, 0.75rem);   /* 11 → 12 */
	--f-size-small: clamp(0.875rem, 0.853rem + 0.0939vw, 0.9375rem);     /* 14 → 15 */
	--f-size-body: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem);          /* 16 → 17 */
	--f-size-lead: clamp(1.125rem, 1.059rem + 0.2817vw, 1.3125rem);      /* 18 → 21 */
	--f-size-h5: clamp(1.1875rem, 1.1215rem + 0.2817vw, 1.375rem);       /* 19 → 22 */
	--f-size-h4: clamp(1.4375rem, 1.2835rem + 0.6573vw, 1.875rem);       /* 23 → 30 */
	--f-size-h3: clamp(1.75rem, 1.4419rem + 1.3146vw, 2.625rem);         /* 28 → 42 */
	--f-size-h2: clamp(2.125rem, 1.5528rem + 2.4413vw, 3.75rem);         /* 34 → 60 */
	--f-size-h1: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);              /* 40 → 80 */
	--f-size-display: clamp(3rem, 1.6796rem + 5.6338vw, 6.75rem);     /* 48 → 108 */
	--f-size-quote: clamp(1.625rem, 1.2289rem + 1.6901vw, 2.75rem);      /* 26 → 44 */
	--f-size-price: clamp(1.375rem, 1.1989rem + 0.7512vw, 1.875rem);     /* 22 → 30 */
	--f-size-label: 0.75rem;                                             /* buttons, nav: 12 */

	--f-lh-tight: 1.02;
	--f-lh-heading: 1.08;
	--f-lh-snug: 1.3;
	--f-lh-body: 1.65;

	--f-track-display: -0.015em;
	--f-track-heading: -0.01em;
	--f-track-label: 0.16em;
	--f-track-eyebrow: 0.2em;
	--f-track-wordmark: 0.32em;

	--f-weight-light: 300;
	--f-weight-regular: 400;
	--f-weight-medium: 500;

	/* ---------- Spacing (4/8 base) ---------- */
	--s-1: 0.25rem;  /* 4 */
	--s-2: 0.5rem;   /* 8 */
	--s-3: 0.75rem;  /* 12 */
	--s-4: 1rem;     /* 16 */
	--s-5: 1.5rem;   /* 24 */
	--s-6: 2rem;     /* 32 */
	--s-7: 3rem;     /* 48 */
	--s-8: 4rem;     /* 64 */
	--s-9: 6rem;     /* 96 */
	--s-10: 8rem;    /* 128 */
	--s-section: clamp(6rem, 4.2394rem + 7.5117vw, 11rem);      /* 96 → 176 */
	--s-section-sm: clamp(4rem, 2.9437rem + 4.507vw, 7rem);     /* 64 → 112 */
	--s-page-top: clamp(4rem, 2.9437rem + 4.507vw, 7rem);   /* 64 → 112: first content below an in-flow header (all page openings) */
	--s-stack: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);       /* 40 → 64: header → content */
	--s-gutter: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);        /* 16 → 32 */
	--s-margin: clamp(1rem, -0.0563rem + 4.507vw, 4rem);        /* 16 → 64 page side margin */

	/* ---------- Layout ---------- */
	--l-narrow: 45rem;   /* 720 — reading column */
	--l-content: 75rem;  /* 1200 */
	--l-wide: 90rem;     /* 1440 */
	--l-header-h: 4.5rem;     /* 72 */
	--l-header-h-lg: 5.5rem;  /* 88 */
	--l-tap: 2.75rem;         /* 44 minimum tap target */
	--l-control-h: 3.25rem;   /* 52 buttons / inputs */

	/* ---------- Radius / lines ---------- */
	--r-0: 0;
	--r-1: 2px;
	--hairline: 1px;

	/* ---------- Motion ---------- */
	--e-out: cubic-bezier(0.22, 1, 0.36, 1);
	--e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--e-linear: linear;
	--d-fast: 200ms;
	--d-base: 300ms;
	--d-slow: 600ms;
	--d-reveal: 900ms;
	--d-image: 1200ms;
	--d-zoom: 1400ms;
	--reveal-shift: 1.5rem;
	--zoom-hover: 1.03;

	/* ---------- Image ratios ---------- */
	--ratio-hero: 16 / 9;
	--ratio-property: 4 / 5;
	--ratio-property-wide: 3 / 2;
	--ratio-area: 3 / 4;
	--ratio-editorial: 3 / 2;
	--ratio-gallery: 3 / 2;
	--ratio-floorplan: 4 / 3;
	--ratio-portrait: 4 / 5;
	--ratio-developer: 16 / 10;

	/* ---------- Layers ---------- */
	--z-base: 1;
	--z-sticky: 50;
	--z-header: 100;
	--z-menu: 200;
	--z-modal: 300;
}

/* Dark context — any section/component can opt in. Swaps semantic tokens only. */
.is-dark,
.l-section--dark,
.c-section--dark {
	--c-bg: var(--c-charcoal);
	--c-surface: var(--c-graphite);
	--c-surface-alt: var(--c-graphite);
	--c-text: var(--c-ivory);
	--c-text-muted: var(--c-mist);
	--c-line: var(--c-border-dark);
	--c-line-strong: var(--c-ivory);
	--c-accent: var(--c-champagne);
	--c-accent-hover: var(--c-ivory);
	--c-accent-text: var(--c-champagne);
	--c-focus: var(--c-champagne);
	--c-invalid: var(--c-error-on-dark);
	--c-valid: var(--c-success-on-dark);
	--c-btn-bg: var(--c-ivory);
	--c-btn-text: var(--c-charcoal);
	--c-btn-bg-hover: var(--c-linen);
}

/* Linen context (soft alternate band). */
.is-linen,
.l-section--linen,
.c-section--linen {
	--c-bg: var(--c-linen);
	--c-surface: var(--c-ivory);
}