/*
 * tokens.css — Design token foundation for mvc-parent.
 *
 * Layer architecture (each layer overrides the one above):
 *   1. tokens.css         — raw scale tokens (--color-*, --font-*, --space-*, etc.)
 *                           AND semantic bridge defaults (--mvc-color-*, --mvc-font-*, etc.)
 *   2. presets/*.css      — curated overrides for a design style (inter, playfair, etc.)
 *   3. child-overrides.css— per-client code-level overrides
 *   4. design-tokens.php  — inline <style> from the WP dashboard (ALWAYS WINS)
 *
 * --mvc-* tokens are the ones components and sections reference.
 * The dashboard writes to --mvc-* only; it never touches the raw scale tokens.
 * This means a dashboard reset removes client branding but leaves the scale intact.
 *
 * Do NOT hard-code values in components — always reference var(--mvc-token-name).
 */

:root {

	/* ── Brand colors ──────────────────────────────────────────────────────── */
	/* Hex defaults are the factory palette. The dashboard overrides these by
	   writing --color-primary/-accent/-secondary directly in design-tokens.php
	   (an inline <style> in <head>). The -dark/-light/-subtle shades below are
	   DERIVED from the live primary value via color-mix(), so when the dashboard
	   sets primary = navy, --color-primary-dark becomes a deeper navy
	   automatically. Same for accent and secondary. */
	--color-primary:        #1e40af;
	--color-primary-dark:   color-mix(in srgb, var(--color-primary) 75%, black);
	--color-primary-light:  color-mix(in srgb, var(--color-primary) 30%, white);
	--color-primary-subtle: color-mix(in srgb, var(--color-primary) 8%,  white);

	/* Map pins — decoupled from brand primary so pins can be a distinct
	   color (e.g. red pins on a navy-branded site). Cascade:
	     1. --mvc-color-map-pin   (set by Design Settings → Map Pin Color in admin)
	     2. --color-primary       (brand color fallback)
	   The --mvc-color-map-pin slot is empty by default; design-tokens.php fills
	   it from the dashboard ACF field when the editor picks a color. */
	--color-map-pin:        var(--mvc-color-map-pin, var(--color-primary));

	--color-accent:         #f59e0b;
	--color-accent-dark:    color-mix(in srgb, var(--color-accent) 75%, black);
	--color-accent-light:   color-mix(in srgb, var(--color-accent) 30%, white);
	--color-accent-subtle:  color-mix(in srgb, var(--color-accent) 8%,  white);

	--color-secondary:      #475569;
	--color-secondary-dark: color-mix(in srgb, var(--color-secondary) 75%, black);
	--color-secondary-light:color-mix(in srgb, var(--color-secondary) 30%, white);

	/* ── Neutral palette ───────────────────────────────────────────────────── */
	--color-white:   #ffffff;
	--color-black:   #000000;
	--color-gray-50: #f8fafc;
	--color-gray-100:#f1f5f9;
	--color-gray-200:#e2e8f0;
	--color-gray-300:#cbd5e1;
	--color-gray-400:#94a3b8;
	--color-gray-500:#64748b;
	--color-gray-600:#475569;
	--color-gray-700:#334155;
	--color-gray-800:#1e293b;
	--color-gray-900:#0f172a;

	/* ── Brand neutrals (dashboard-controlled) ──────────────────────────────
	   Brand Light + Brand Dark are the named "light" and "dark" ingredients
	   for this brand. Auto-contrast logic in design-tokens.php picks one of
	   these for heading text when the VA leaves Page Heading blank. */
	--color-brand-light:    var(--mvc-color-brand-light, #ffffff);
	--color-brand-dark:     var(--mvc-color-brand-dark, #111111);

	/* ── Surface / semantic ────────────────────────────────────────────────── */
	--color-bg:             #ffffff;
	--color-bg-alt:         #f8fafc;
	--color-surface:        #ffffff;
	--color-surface-raised: #f1f5f9;
	--color-border:         var(--mvc-color-border, #e2e8f0);
	--color-border-strong:  #cbd5e1;
	--color-divider:        var(--mvc-color-divider, var(--color-border));

	/* ── Text ──────────────────────────────────────────────────────────────── */
	--color-text:         #1e293b;
	--color-text-muted:   #64748b;
	--color-text-inverse: #ffffff;
	--color-heading:      var(--mvc-color-heading, #0f172a);
	--color-card-heading: var(--mvc-color-card-heading, var(--color-heading));
	--color-card-body:    var(--mvc-color-card-body, var(--color-text));
	--color-link:         var(--color-primary);
	--color-link-hover:   var(--color-primary-dark);

	/* ── Status ────────────────────────────────────────────────────────────── */
	--color-success:        #16a34a;
	--color-success-subtle: #f0fdf4;
	--color-warning:        #d97706;
	--color-warning-subtle: #fffbeb;
	--color-error:          #dc2626;
	--color-error-subtle:   #fef2f2;
	--color-info:           #0284c7;
	--color-info-subtle:    #f0f9ff;

	/* ── Typography — families ─────────────────────────────────────────────── */
	--font-heading: 'Inter', system-ui, sans-serif;
	--font-body:    'Inter', system-ui, sans-serif;
	--font-mono:    ui-monospace, 'Cascadia Code', monospace;

	/* ── Typography — scale ────────────────────────────────────────────────── */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
	--text-6xl:  3.75rem;

	/* ── Typography — weights ──────────────────────────────────────────────── */
	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-black:    900;

	/* ── Typography — line heights ─────────────────────────────────────────── */
	--leading-tight:   1.2;
	--leading-snug:    1.35;
	--leading-normal:  1.5;
	--leading-relaxed: 1.65;
	--leading-loose:   1.8;

	/* ── Typography — letter spacing ───────────────────────────────────────── */
	--tracking-tight:   -0.025em;
	--tracking-normal:   0em;
	--tracking-wide:     0.025em;
	--tracking-wider:    0.05em;
	--tracking-widest:   0.1em;

	/* ── Spacing ───────────────────────────────────────────────────────────── */
	--space-px: 1px;
	--space-0:  0;
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-7:  1.75rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-28: 7rem;
	--space-32: 8rem;

	/* ── Section padding ───────────────────────────────────────────────────── */
	--section-py:    5rem;
	--section-py-sm: 3rem;
	--section-py-lg: 7rem;

	/* ── Layout ────────────────────────────────────────────────────────────── */
	--container-max:    1280px;
	--container-narrow: 800px;
	--container-wide:   1440px;
	--container-px:     1.5rem;
	--grid-gap:         1.5rem;

	/* ── Border radius ─────────────────────────────────────────────────────── */
	--radius-none: 0;
	--radius-sm:   0.25rem;
	--radius:      0.5rem;
	--radius-md:   0.75rem;
	--radius-lg:   1rem;
	--radius-xl:   1.5rem;
	--radius-2xl:  2rem;
	--radius-full: 9999px;

	/* ── Shadows ───────────────────────────────────────────────────────────── */
	--shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow:       0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
	--shadow-none:  0 0 #0000;

	/* ── Transitions ───────────────────────────────────────────────────────── */
	--duration-fast:   150ms;
	--duration-normal: 250ms;
	--duration-slow:   400ms;
	--duration-slower: 600ms;

	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in:      cubic-bezier(0.4, 0, 1, 1);
	--ease-out:     cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

	--transition:           all var(--duration-normal) var(--ease-default);
	--transition-colors:    color var(--duration-normal) var(--ease-default),
	                        background-color var(--duration-normal) var(--ease-default),
	                        border-color var(--duration-normal) var(--ease-default);
	--transition-shadow:    box-shadow var(--duration-normal) var(--ease-default);
	--transition-transform: transform var(--duration-normal) var(--ease-default);

	/* ── Z-index scale ─────────────────────────────────────────────────────── */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:    10;
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-header:    300;
	--z-overlay:   400;
	--z-modal:     500;
	--z-toast:     600;

	/* ── Header ────────────────────────────────────────────────────────────── */
	--header-height:          72px;
	--header-height-sm:       60px;
	--header-bg:              var(--color-white);
	--header-text:            var(--color-text);
	--header-border:          var(--color-border);
	--header-shadow:          var(--shadow);
	--header-logo-height:     48px;
	--header-logo-height-sm:  36px;

	/* ── Footer ────────────────────────────────────────────────────────────── */
	--footer-bg:           var(--color-gray-900);
	--footer-text:         var(--color-gray-300);
	--footer-heading-color:var(--color-white);
	--footer-link-color:   var(--color-gray-400);
	--footer-link-hover:   var(--color-white);
	--footer-border:       var(--color-gray-700);
	--footer-py:           4rem;

	/* ── Card ──────────────────────────────────────────────────────────────── */
	--card-bg:           var(--color-white);
	--card-border:       var(--color-border);
	--card-radius:       var(--radius-lg);
	--card-shadow:       var(--shadow);
	--card-hover-shadow: var(--shadow-lg);
	--card-padding:      var(--space-6);
	--card-padding-sm:   var(--space-4);

	/* ── Button ────────────────────────────────────────────────────────────── */
	--btn-radius:         var(--radius);
	--btn-font-family:    var(--font-body);
	--btn-font-weight:    var(--font-weight-semibold);
	--btn-letter-spacing: var(--tracking-wide);
	--btn-transition:     color var(--duration-normal) var(--ease-default),
	                      background-color var(--duration-normal) var(--ease-default),
	                      border-color var(--duration-normal) var(--ease-default),
	                      box-shadow var(--duration-normal) var(--ease-default),
	                      transform var(--duration-fast) var(--ease-out);
	--btn-px:             1.5rem;
	--btn-py:             0.75rem;
	--btn-px-sm:          1rem;
	--btn-py-sm:          0.5rem;
	--btn-px-lg:          2rem;
	--btn-py-lg:          1rem;
	--btn-font-size:      var(--text-base);
	--btn-font-size-sm:   var(--text-sm);
	--btn-font-size-lg:   var(--text-lg);

	/* ── Form inputs ───────────────────────────────────────────────────────── */
	--input-height:       2.75rem;
	--input-height-sm:    2.25rem;
	--input-radius:       var(--radius);
	--input-border:       var(--color-border-strong);
	--input-border-focus: var(--color-primary);
	--input-bg:           var(--color-white);
	--input-placeholder:  var(--color-gray-400);
	--input-text:         var(--color-text);
	--input-px:           var(--space-4);
	--input-py:           var(--space-3);

	/* ── Focus ring ────────────────────────────────────────────────────────── */
	--focus-ring-color:  var(--color-primary);
	--focus-ring-width:  3px;
	--focus-ring-offset: 2px;

	/* ═══════════════════════════════════════════════════════════════════════════
	 * SEMANTIC BRIDGE TOKENS  (--mvc-*)
	 * These are the tokens components and sections reference for all visual output.
	 * Default values point at the raw scale tokens above.
	 * The design dashboard (design-tokens.php) writes directly to these --mvc-*
	 * tokens via an inline <style> that loads last — giving dashboard settings
	 * the highest specificity without touching raw scale tokens.
	 * ═══════════════════════════════════════════════════════════════════════════ */

	/* ── Brand colors (dashboard: Colors tab) ─────────────────────────────── */
	/* --mvc-color-primary/-accent/-secondary mirror the raw --color-* tokens so
	   components that read --mvc-color-primary directly (e.g. footer-variants)
	   still resolve correctly. The dashboard inline <style> in design-tokens.php
	   overrides BOTH --color-primary and --mvc-color-primary (see that file's
	   build function), so the shade derivations above auto-update from the
	   dashboard value too. */
	--mvc-color-primary:       var(--color-primary);
	--mvc-color-secondary:     var(--color-secondary);
	--mvc-color-accent:        var(--color-accent);
	--mvc-color-surface:       var(--color-surface);
	--mvc-color-surface-dark:  var(--color-gray-900);
	--mvc-color-surface-light: var(--color-bg-alt);
	--mvc-color-text:          var(--color-text);
	--mvc-color-text-muted:    var(--color-text-muted);
	--mvc-color-text-light:    var(--color-text-inverse);
	--mvc-color-border:        var(--color-border);
	--mvc-color-btn-bg:        var(--color-primary);
	--mvc-color-btn-text:      var(--mvc-color-text-light);
	--mvc-color-link:          var(--color-link);
	--mvc-color-link-hover:    var(--color-link-hover);

	/* ── Typography (dashboard: Typography tab) ───────────────────────────── */
	--mvc-font-heading:        var(--font-heading);
	--mvc-font-body:           var(--font-body);
	--mvc-font-accent:         var(--mvc-font-body);
	--mvc-font-size-base:      var(--text-base);
	--mvc-font-weight-heading: var(--font-weight-bold);
	--mvc-font-weight-body:    var(--font-weight-normal);

	/* ── Navigation text style (dashboard: Typography tab) ───────────────── */
	--mvc-nav-text-transform:  none;
	--mvc-nav-letter-spacing:  0;
	--mvc-nav-font-weight:     var(--font-weight-medium);

	/* ── Buttons (dashboard: Buttons tab) ─────────────────────────────────── */
	--mvc-btn-radius:          var(--btn-radius);
	--mvc-btn-text-transform:  none;

	/* ── Shape & style (dashboard: Shape & Style tab) ─────────────────────── */
	--mvc-radius-sm:           var(--radius-sm);
	--mvc-radius:              var(--radius);
	--mvc-radius-md:           var(--radius-md);
	--mvc-radius-lg:           var(--radius-lg);
	--mvc-radius-xl:           var(--radius-xl);

	--mvc-shadow-card:         var(--shadow-md);
	--mvc-shadow-header:       var(--shadow);
	--mvc-shadow-btn:          var(--shadow-sm);

	--mvc-card-bg:             var(--card-bg);
	--mvc-card-border:         none;
	--mvc-card-shadow:         var(--mvc-shadow-card);
	--mvc-card-hover-shadow:   var(--card-hover-shadow);
	--mvc-card-backdrop:       none;

	--mvc-section-py:          var(--section-py);
	--mvc-section-py-sm:       var(--section-py-sm);
	--mvc-section-py-lg:       var(--section-py-lg);

	--mvc-container-max:       var(--container-max);

	/* ── Image treatment (dashboard: Image Treatment tab) ─────────────────── */
	--mvc-img-radius:          var(--radius-md);
	--mvc-img-overlay-opacity: 0.4;

	/* ── Animation (dashboard: Animation tab) ─────────────────────────────── */
	--mvc-duration-reveal:     var(--duration-slow);

	/* ── Gradients ─────────────────────────────────────────────────────────── */
	/* Raw gradient tokens — composited from brand colors. Components and
	   sections reference these so a single brand-color change cascades through
	   every gradient automatically.                                            */

	/* Brand gradients */
	--mvc-gradient-primary:    linear-gradient(135deg, var(--mvc-color-primary) 0%, color-mix(in srgb, var(--mvc-color-primary) 70%, #000) 100%);
	--mvc-gradient-primary-h:  linear-gradient(90deg,  var(--mvc-color-primary) 0%, color-mix(in srgb, var(--mvc-color-primary) 70%, #000) 100%);
	--mvc-gradient-accent:     linear-gradient(135deg, var(--mvc-color-accent)  0%, color-mix(in srgb, var(--mvc-color-accent)  70%, #000) 100%);

	/* Hero/section gradients */
	--mvc-gradient-hero:       linear-gradient(135deg, var(--mvc-color-primary) 0%, color-mix(in srgb, var(--mvc-color-primary) 55%, var(--mvc-color-accent)) 100%);
	--mvc-gradient-hero-dark:  linear-gradient(160deg, #0a0f2e 0%, var(--mvc-color-primary) 55%, color-mix(in srgb, var(--mvc-color-primary) 60%, #000) 100%);
	--mvc-gradient-section:    linear-gradient(180deg, var(--color-gray-900) 0%, color-mix(in srgb, var(--color-gray-900) 85%, var(--mvc-color-primary)) 100%);

	/* Subtle surface gradients for light sections */
	--mvc-gradient-surface:    linear-gradient(160deg, var(--color-gray-50) 0%, color-mix(in srgb, var(--color-gray-50) 80%, var(--mvc-color-primary)) 100%);
	--mvc-gradient-surface-warm: linear-gradient(160deg, #fafafa 0%, color-mix(in srgb, var(--mvc-color-accent) 6%, #fafafa) 100%);

	/* Overlay gradients — used over photos for readability */
	--mvc-gradient-overlay:    linear-gradient(to top, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.35) 50%, rgb(0 0 0 / 0.1) 100%);
	--mvc-gradient-overlay-h:  linear-gradient(to right, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.2) 60%, transparent 100%);
	--mvc-gradient-overlay-brand: linear-gradient(to top, color-mix(in srgb, var(--mvc-color-primary) 90%, transparent) 0%, color-mix(in srgb, var(--mvc-color-primary) 40%, transparent) 50%, transparent 100%);

	/* Premium shimmer line — used as a decorative accent element */
	--mvc-gradient-shimmer:    linear-gradient(90deg, var(--mvc-color-accent) 0%, color-mix(in srgb, var(--mvc-color-accent) 60%, #fff) 50%, var(--mvc-color-accent) 100%);
	--mvc-gradient-line:       linear-gradient(90deg, transparent, var(--mvc-color-accent), transparent);

	/* Mesh/radial ambient backgrounds for premium sections */
	--mvc-gradient-mesh-dark:  radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb, var(--mvc-color-primary) 40%, transparent) 0%, transparent 60%),
	                            radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in srgb, var(--mvc-color-accent)  15%, transparent) 0%, transparent 60%),
	                            var(--color-gray-900);

	--mvc-gradient-mesh-light: radial-gradient(ellipse 70% 55% at 15% 30%, color-mix(in srgb, var(--mvc-color-primary) 8%, transparent) 0%, transparent 65%),
	                            radial-gradient(ellipse 55% 45% at 85% 75%, color-mix(in srgb, var(--mvc-color-accent)  5%, transparent) 0%, transparent 60%),
	                            var(--color-gray-50);

	/* ── Glow / luxury shadow tokens ──────────────────────────────────────── */
	--mvc-glow-primary:  0 0 40px color-mix(in srgb, var(--mvc-color-primary) 30%, transparent),
	                     0 0 80px color-mix(in srgb, var(--mvc-color-primary) 12%, transparent);
	--mvc-glow-accent:   0 0 30px color-mix(in srgb, var(--mvc-color-accent)  40%, transparent),
	                     0 0 60px color-mix(in srgb, var(--mvc-color-accent)  15%, transparent);
	--mvc-shadow-luxury: 0 4px 6px -1px rgb(0 0 0 / 0.07),
	                     0 20px 40px -8px rgb(0 0 0 / 0.15),
	                     0 0 0 1px rgb(255 255 255 / 0.04);
	--mvc-shadow-card-premium: 0 2px 4px -1px rgb(0 0 0 / 0.06),
	                            0 8px 24px -4px rgb(0 0 0 / 0.12),
	                            inset 0 1px 0 rgb(255 255 255 / 0.08);

}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast:        0ms;
		--duration-normal:      0ms;
		--duration-slow:        0ms;
		--duration-slower:      0ms;
		--transition:           none;
		--transition-colors:    none;
		--transition-shadow:    none;
		--transition-transform: none;
		--btn-transition:       none;
	}
}
