/**
 * mvc-valuemax/css/client-overrides.css
 *
 * Client-specific overrides for Value Max Quality Builder.
 * Base preset: premium-modern
 * 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. If the editor changes primary
 *   from navy to forest, every gradient on this site shifts to forest.
 */

:root {

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

	/* Headings: Bold condensed — matches the strong headline treatment in mockup */
	--font-heading:     'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
	--mvc-font-heading: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;

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

	/* Tighter tracking for condensed headings */
	--tracking-tight: -0.01em;

	/* ── Scale ─────────────────────────────────────────────────────────────── */

	/* Larger hero text — premium brands go bigger */
	--text-5xl: 3.75rem;
	--text-6xl: 4.5rem;

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

	/* ── Section Spacing — generous, premium ──────────────────────────────── */
	--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, refined (not rounded) ──────────────────────────── */
	--radius-sm:  0.125rem;
	--radius-md:  0.25rem;
	--radius-lg:  0.375rem;
	--radius-xl:  0.5rem;
	--radius-full: 9999px;

	/* ── Shadows — depth-tinted, premium feel ─────────────────────────────── */
	/* Neutral black-based shadows so they read on any brand color background */
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.14), 0 4px 8px -4px rgba(0, 0, 0, 0.06);

	/* ── Motion — subtle, confident ───────────────────────────────────────── */
	--transition-speed:  200ms;
	--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 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-primary-subtle) 100%);

	/* Photo overlays — neutral black scrims work on any brand */
	--mvc-gradient-overlay:       linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.08) 100%);
	--mvc-gradient-overlay-h:     linear-gradient(to right, rgba(0,0,0,0.85) 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 — use accent so they pop on any primary */
	--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)  22%, transparent) 0%, transparent 60%),
	                           var(--color-primary-dark);
	--mvc-gradient-mesh-light: radial-gradient(ellipse 70% 55% at 15% 30%, color-mix(in srgb, var(--color-primary)  9%, transparent) 0%, transparent 65%),
	                           radial-gradient(ellipse 55% 45% at 85% 75%, color-mix(in srgb, var(--color-accent)   6%, transparent) 0%, transparent 60%),
	                           #f8fafc;

	/* 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 */
	--mvc-shadow-luxury:       0 4px 6px -1px rgba(0,0,0,0.07),
	                           0 20px 40px -8px rgba(0,0,0,0.16),
	                           0 0 0 1px rgba(255,255,255,0.04);
	--mvc-shadow-card-premium: 0 2px 4px -1px rgba(0,0,0,0.06),
	                           0 8px 24px -4px rgba(0,0,0,0.13),
	                           inset 0 1px 0 rgba(255,255,255,0.08);
}