/* ============================================================================
   EUX Blocks — Design tokens
   ----------------------------------------------------------------------------
   Tokens are scoped to .eux-block (not :root) so the plugin does not pollute
   the global CSS namespace and cannot be silently overridden by Salient or
   other plugins. All tokens are prefixed --eux-* for the same reason.

   Block-specific styles live in each block's own style.css.
   ============================================================================ */

.eux-block {
	/* === Brand colours ===================================================== */
	--eux-cream:        #F4F0EC;
	--eux-black:        #000000;
	--eux-white:        #FFFFFF;
	--eux-woo-purple:   #720EEC;

	/* Cream tints */
	--eux-cream-50:     #FAF8F5;
	--eux-cream-100:    #F4F0EC;
	--eux-cream-200:    #ECE6DF;

	/* Ink scale — neutrals */
	--eux-ink-50:       #F5F5F5;
	--eux-ink-100:      #E6E6E6;
	--eux-ink-200:      #CFCFCF;
	--eux-ink-300:      #B3B3B3;
	--eux-ink-400:      #8C8C8C;
	--eux-ink-500:      #6B6B6B;
	--eux-ink-600:      #4D4D4D;
	--eux-ink-700:      #333333;
	--eux-ink-800:      #1A1A1A;
	--eux-ink-900:      #0A0A0A;

	/* Woo purple scale */
	--eux-woo-50:       #F1E3FE;
	--eux-woo-100:      #E0C4FD;
	--eux-woo-200:      #C58CFB;
	--eux-woo-300:      #A659F8;
	--eux-woo-400:      #8C2EF3;
	--eux-woo-500:      #720EEC;
	--eux-woo-600:      #5F0BC9;
	--eux-woo-700:      #5A0BBC;
	--eux-woo-800:      #45089A;
	--eux-woo-900:      #2F0670;

	/* Status (rare) */
	--eux-success:      #1F8A5B;
	--eux-warning:      #B8770A;
	--eux-danger:       #B0321A;

	/* === Typography ======================================================== */
	--eux-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--eux-font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--eux-font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

	/* === Radii ============================================================= */
	--eux-r-sm:    6px;
	--eux-r-md:    12px;
	--eux-r-lg:    20px;
	--eux-r-xl:    28px;
	--eux-r-pill:  999px;

	/* === Elevation ========================================================= */
	--eux-shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
	--eux-shadow-2: 0 2px 4px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08);

	/* === Motion ============================================================
	   --------------------------------------------------------------------------
	   Two layers of motion tokens:
	   - --eux-ease-out / --eux-dur-fast/base/slow: UI feedback (buttons,
	     hovers, dropdowns). Short, snappy, standard ease-out.
	   - --eux-ease-expo / --eux-dur-reveal-*: scroll-reveal entrances. Long
	     expo-out ("skeleton load" feel) matching the design reference. The
	     duration mismatch is intentional — UI feedback should feel instant,
	     reveals should feel deliberate and emergent.
	   ========================================================================= */
	--eux-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
	--eux-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
	--eux-ease-expo:       cubic-bezier(0.16, 1, 0.3, 1);
	--eux-dur-fast:        150ms;
	--eux-dur-base:        280ms;
	--eux-dur-slow:        480ms;
	--eux-dur-reveal:      900ms;
	--eux-dur-reveal-long: 1200ms;
	--eux-stagger:         160ms;
}

@media (prefers-reduced-motion: reduce) {
	.eux-block {
		--eux-dur-fast:        0ms;
		--eux-dur-base:        0ms;
		--eux-dur-slow:        0ms;
		--eux-dur-reveal:      0ms;
		--eux-dur-reveal-long: 0ms;
		--eux-stagger:         0ms;
	}
}

/* ============================================================================
   ACCENT VARIANT — WordPress blue
   ----------------------------------------------------------------------------
   Sections (service-hero, problem-trio, split-feature, bento-box, process)
   opt into this by setting `accent: 'wp'`, which lands `.eux-block--accent-wp`
   on their wrapper. The class remaps the --eux-woo-* scale to the WordPress
   brand blue (#21759B) and lets all descendants inherit via the cascade —
   no child block needs to know about accent.

   The remap is a flat list of 10 vars rather than a `:root` swap because
   it has to be scoped to the section. A page can host woo-accent and
   wp-accent sections side-by-side, and they cannot leak into each other.

   CRITICAL SCOPING NOTE (v0.36.27):
   The override applies to BOTH the wrapper itself AND any inner element
   that also carries the `.eux-block` class. This matters because every
   eux-blocks child block (problem-card, bento-card, etc.) also carries
   `.eux-block` on its wrapper to inherit the base token scale. But that
   re-asserts the base rule `.eux-block { --eux-woo-300: #A659F8 }` LOCALLY
   on the child element — overriding our accent vars set on the parent
   section.

   Without the second selector below, only the section wrapper itself
   would have blue tokens; every child .eux-block would reset to purple,
   so card subtitles, bullets, and inner accents would all stay purple
   even though the section's eyebrow and section title (which are direct
   text descendants without their own .eux-block class) did switch.

   To add a third accent in future (Shopify green? Salesforce blue?), copy
   this block, replace the class suffix and the 10 hex values, done.
   ============================================================================ */
.eux-block.eux-block--accent-wp,
.eux-block.eux-block--accent-wp .eux-block {
	--eux-woo-purple:   #21759B; /* WordPress brand blue */
	--eux-woo-50:       #E6F1F7;
	--eux-woo-100:      #C9E0EE;
	--eux-woo-200:      #8FBFD9;
	--eux-woo-300:      #4FA0C4; /* lighter — dark-mode accent */
	--eux-woo-400:      #2A89B0;
	--eux-woo-500:      #21759B;
	--eux-woo-600:      #1B6991;
	--eux-woo-700:      #155A78;
	--eux-woo-800:      #0F4A65;
	--eux-woo-900:      #093D52;
}