/* ============================================================
 * Keystone — Global Component Tokens
 * ============================================================
 * Shared CSS custom properties consumed by every Keystone
 * component CSS file. Brands may override any of these in a
 * `body.brand-{slug}` scope to retheme the system.
 *
 * Load order: this file MUST be enqueued before any component
 * CSS that consumes its tokens (hero-banner, media-section,
 * testimonials, category-tiles, pricing-table, etc.).
 *
 * Naming rule: tokens are global and generic. Do not name them
 * after a brand, page, or campaign. See
 * docs/component-naming-conventions.md.
 * ============================================================ */

:root {
	/* ── Card elevation ─────────────────────────────────────
	 * Material-style two-layer shadow used by every card-shaped
	 * surface (testimonial card, category tile, post card, etc.)
	 * so the elevation language stays consistent across the
	 * system. Hover token is the lifted state.
	 * ──────────────────────────────────────────────────────── */
	--keystone-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
	--keystone-card-shadow-hover: 0 2px 3px rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
	--keystone-card-shadow-transition: box-shadow 0.2s ease, transform 0.2s ease;

	/* Scale applied to card surface on hover — override per brand if needed. */
	--keystone-card-hover-transform:        scale(1.025);
	--keystone-card-hover-transform-subtle: scale(1.015); /* for cards that already zoom an inner image */

	/* ── Card surface defaults ──────────────────────────────
	 * Component-level files may still define their own *--bg,
	 * *--radius locals to allow per-component tuning, but they
	 * should fall back to these globals so a brand override of
	 * the global cascades through every component at once.
	 * ──────────────────────────────────────────────────────── */
	--keystone-card-radius: 14px;
	--keystone-card-bg:     var(--wp--preset--color--accent-5, #f1f1f4);

	/* ── Dark surface gradient (shared) ──────────────────────
	 * Used by hero-banner, pricing-table, and any future
	 * "dark feature surface" component. A single brand override
	 * shifts every dark section together, preserving visual
	 * cohesion across the page.
	 *
	 * Override per brand:
	 *   body.brand-{slug} {
	 *     --keystone-surface-gradient-dark: linear-gradient(...);
	 *   }
	 * ──────────────────────────────────────────────────────── */
	--keystone-surface-gradient-dark: linear-gradient(135deg, #0a1834 0%, #16307c 60%, #1d3eaa 100%);
	--keystone-surface-on-dark:       #ffffff;
}

/* Brand: VaaSBlock — every dark feature surface shifts together. */
body.brand-vaasblock {
	--keystone-surface-gradient-dark: linear-gradient(135deg, #0a1834 0%, #16307c 55%, #1a1a72 100%);
}

/* ── Button jiggle (shared motion language) ─────────────────
 * Originally introduced for the Swift Cargo nav "Get a Quote"
 * pill and re-typed for the VaaSBlock nav button. Lifted here
 * so any Keystone CTA can opt in via:
 *
 *     .my-cta:hover { animation: keystone-button-jiggle 0.4s ease; }
 *
 * Brand-specific instances in header.css (swiftcargo-button-jiggle,
 * vaasblock-button-jiggle) remain for now; migrate them to this
 * global keyframe next time header.css is touched.
 * ──────────────────────────────────────────────────────────── */
@keyframes keystone-button-jiggle {
	0%, 100% { transform: translateY(-2px); }
	25%      { transform: translateY(-2px) rotate(-1.5deg); }
	50%      { transform: translateY(-2px) rotate(1.5deg); }
	75%      { transform: translateY(-2px) rotate(-0.75deg); }
}