/**
 * mvc-lakai/css/client-overrides.css
 *
 * Client-specific overrides for Lakai Properties.
 * Base preset: luxury-minimal
 * Loaded last in the CSS chain.
 *
 * COLOR POLICY (2026-06-03):
 *   ALL brand colors are controlled by the WP dashboard → Design Settings → Colors.
 *   This file MUST NOT set --color-primary/-secondary/-accent/-surface/-text/-heading,
 *   their -dark/-light/-subtle shades, or any other dashboard-mirrored token.
 *   Those derive from the dashboard via tokens.css color-mix() and the inline
 *   <style> in design-tokens.php. Setting them here would silently override
 *   the dashboard, breaking the editor's mental model.
 *
 *   This file controls typography, scale, radius, shadows, and gradient
 *   compositions — anything that's NOT a dashboard color field.
 *
 *   Gradient tokens reference var(--color-primary)/var(--color-accent) so they
 *   automatically pick up dashboard changes.
 *
 * Brand character: California luxury hospitality investment brand.
 * Editorial serif headings (Cormorant Garamond) + clean modern body (Inter).
 * Target ICP: hands-off investors, luxury homeowners, out-of-state owners,
 * executive rental owners, high-income professionals.
 */

:root {

	/* ── Typography ────────────────────────────────────────────────────────── */

	/* Headings: Editorial serif — Cormorant Garamond gives the luxury hospitality feel */
	--font-heading:     'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
	--mvc-font-heading: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;

	/* Body: Clean modern sans */
	--font-body:    'Inter', system-ui, sans-serif;
	--mvc-font-body:'Inter', system-ui, sans-serif;

	/* Refined letter-spacing — editorial serif breathes a touch */
	--tracking-tight:  -0.005em;
	--tracking-normal:  0;
	--tracking-wide:    0.08em;

	/* ── Scale ─────────────────────────────────────────────────────────────── */
	--text-5xl: 3.5rem;
	--text-6xl: 4.25rem;

	/* ── Container ─────────────────────────────────────────────────────────── */
	--container-max: 1280px;

	/* ── Section Spacing — generous, hospitality-feel ─────────────────────── */
	--section-padding-sm: var(--space-16);
	--section-padding-md: var(--space-24);
	--section-padding-lg: var(--space-32);
	--section-padding-xl: var(--space-32);

	/* ── Radius — minimal, architectural ──────────────────────────────────── */
	--radius-sm:  0.125rem;
	--radius-md:  0.25rem;
	--radius-lg:  0.375rem;
	--radius-xl:  0.5rem;
	--radius-full: 9999px;

	/* ── Shadows — warm, soft, neutral so they read on any brand bg ───────── */
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.05);

	/* ── Motion — confident, slightly slower than tech feel ───────────────── */
	--transition-speed:  240ms;
	--transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Gradient tokens — composed from dashboard colors ─────────────────── */
	/* All gradients reference --color-primary / --color-primary-dark / --color-accent
	   so dashboard changes flow through. No hardcoded brand hex in gradients. */

	/* Hero / dark section gradients */
	--mvc-gradient-primary:   linear-gradient(135deg, var(--color-primary)      0%, var(--color-primary-dark) 100%);
	--mvc-gradient-primary-h: linear-gradient(90deg,  var(--color-primary)      0%, var(--color-primary-dark) 100%);
	--mvc-gradient-accent:    linear-gradient(135deg, var(--color-accent)       0%, var(--color-accent-dark)  100%);
	--mvc-gradient-hero:      linear-gradient(150deg, var(--color-primary-dark) 0%, var(--color-primary)     55%, var(--color-primary-dark) 100%);
	--mvc-gradient-hero-dark: linear-gradient(160deg, #000000                   0%, var(--color-primary)     55%, var(--color-primary-dark) 100%);
	--mvc-gradient-section:   linear-gradient(180deg, var(--color-primary)      0%, var(--color-primary-dark) 100%);

	/* Light section surfaces — composed from primary-subtle so it tints to brand */
	--mvc-gradient-surface:      linear-gradient(160deg, #fafafa 0%, var(--color-primary-subtle) 100%);
	--mvc-gradient-surface-warm: linear-gradient(160deg, #fafafa 0%, var(--color-accent-subtle)  100%);

	/* Photo overlays — neutral black scrims work on any brand */
	--mvc-gradient-overlay:       linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.72) 100%);
	--mvc-gradient-overlay-h:     linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.22) 60%, transparent 100%);
	--mvc-gradient-overlay-brand: linear-gradient(to top,
		color-mix(in srgb, var(--color-primary) 92%, transparent) 0%,
		color-mix(in srgb, var(--color-primary) 48%, transparent) 50%,
		transparent 100%);

	/* Accent shimmer / line decorators */
	--mvc-gradient-shimmer: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%);
	--mvc-gradient-line:    linear-gradient(90deg, transparent, var(--color-accent), transparent);

	/* Mesh ambients */
	--mvc-gradient-mesh-dark:  radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb, var(--color-primary) 55%, transparent) 0%, transparent 60%),
	                           radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in srgb, var(--color-accent)  16%, transparent) 0%, transparent 60%),
	                           var(--color-primary);
	--mvc-gradient-mesh-light: radial-gradient(ellipse 70% 55% at 15% 30%, color-mix(in srgb, var(--color-primary)  7%, transparent) 0%, transparent 65%),
	                           radial-gradient(ellipse 55% 45% at 85% 75%, color-mix(in srgb, var(--color-accent)  10%, transparent) 0%, transparent 60%),
	                           #F7F3EC;

	/* Glow effects */
	--mvc-glow-primary: 0 0 40px color-mix(in srgb, var(--color-primary) 30%, transparent),
	                    0 0 80px color-mix(in srgb, var(--color-primary) 12%, transparent);
	--mvc-glow-accent:  0 0 30px color-mix(in srgb, var(--color-accent)  40%, transparent),
	                    0 0 60px color-mix(in srgb, var(--color-accent)  15%, transparent);

	/* Luxury shadow tokens — neutral so any brand color reads underneath */
	--mvc-shadow-luxury:       0 4px 6px -1px rgba(0,0,0,0.05),
	                           0 20px 40px -8px rgba(0,0,0,0.14),
	                           0 0 0 1px rgba(255,255,255,0.04);
	--mvc-shadow-card-premium: 0 2px 4px -1px rgba(0,0,0,0.05),
	                           0 8px 24px -4px rgba(0,0,0,0.11),
	                           inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Section header sizing — match the image-blend reference ──────────────
   image-blend.css sets its title/copy to a flat var(--text-5xl) / var(--text-xl)
   (var(--text-4xl) / var(--text-lg) under 767px), not the fluid clamp() the
   shared mvc_get_section_header() helper uses in typography.css. That clamp
   renders smaller than image-blend at most viewport widths and the subtitle
   never steps down on mobile, so the two title styles read as different sizes
   across the site. Pinning both to the same flat scale keeps every section
   header — 16+ components share .mvc-section-title/.mvc-section-subtitle —
   visually consistent with image-blend. Lakai-only: this file loads only for
   the mvc-lakai child theme, so mvc-valuemax is unaffected. */
.mvc-section-title {
	font-size: var(--text-5xl);
}

.mvc-section-subtitle {
	font-size: var(--text-xl);
}

@media (max-width: 767px) {
	.mvc-section-title {
		font-size: var(--text-4xl);
	}

	.mvc-section-subtitle {
		font-size: var(--text-lg);
	}
}

/* subject-feature (ACF flexible-content layout, not currently placed on any
   Lakai page but available in the editor) ships with its own smaller scale
   in the parent theme — bring it in line with the same reference. */
.mvc-subject-feature__title {
	font-size: var(--text-5xl);
}

.mvc-subject-feature__copy {
	font-size: var(--text-xl);
}

@media (max-width: 767px) {
	.mvc-subject-feature__title {
		font-size: var(--text-4xl);
	}

	.mvc-subject-feature__copy {
		font-size: var(--text-lg);
	}
}

/* cpt-hero.css references --font-size-lg, a token that doesn't exist in
   tokens.css, so the CPT hero description (used on every service/location/
   property page) silently falls back to inherit instead of a real size.
   Match it to the same body-copy size used elsewhere (--text-lg, matching
   image-blend's mobile copy step — appropriate since this sits directly
   under a large H1, not a section title). */
.mvc-cpt-hero__desc {
	font-size: var(--text-lg);
}