/**
 * EasyFunnel - Next-Gen Clean Commercial SaaS Design Tokens
 * Inspired by Stripe, Lemon Squeezy, and Linear
 *
 * @package EasyCart
 */

:root {
	/* Canvas & Surface (Clean Minimalist Porcelain Theme) */
	--ec-canvas: #f8fafc;
	--ec-canvas-mesh: #f8fafc;
	--ec-surface: #ffffff;
	--ec-surface-glass: rgba(255, 255, 255, 0.95);
	--ec-surface-subtle: #f4f4f5;
	--ec-surface-hover: #f4f4f5;
	--ec-surface-active: #09090b;

	/* Brand & Accents (Monochrome Slate with Selected Color Badges) */
	--ec-brand-dark: #09090b;
	--ec-brand-indigo: #09090b;
	--ec-brand-cyan: #0284c7;
	--ec-brand-emerald: #10b981;
	--ec-brand-amber: #f59e0b;
	--ec-brand-violet: #7c3aed;

	/* Signature Monochrome & Accent Gradients */
	--ec-gradient-hero: linear-gradient(135deg, #09090b 0%, #18181b 100%);
	--ec-gradient-brand: linear-gradient(135deg, #09090b 0%, #18181b 100%);
	--ec-gradient-emerald: linear-gradient(135deg, #059669 0%, #10b981 100%);
	--ec-gradient-amber: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
	--ec-gradient-cyan: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
	--ec-gradient-dark: linear-gradient(135deg, #09090b 0%, #18181b 100%);
	--ec-gradient-card: #ffffff;
	--ec-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.85) 100%);

	/* Text Hierarchy */
	--ec-text-main: #09090b;
	--ec-text-body: #334155;
	--ec-text-muted: #64748b;
	--ec-text-subtle: #94a3b8;
	--ec-text-inverse: #ffffff;

	/* Borders */
	--ec-border-light: rgba(226, 232, 240, 0.85);
	--ec-border: #e2e8f0;
	--ec-border-hover: #cbd5e1;
	--ec-border-focus: #6366f1;
	--ec-border-highlight: rgba(255, 255, 255, 0.9);

	/* Soft Ambient Multi-Layered Shadows (Stripe Quality) */
	--ec-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	--ec-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
	--ec-shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
	--ec-shadow-card-hover: 0 16px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
	--ec-shadow-pill: 0 2px 8px rgba(79, 70, 229, 0.18);
	--ec-shadow-glow-indigo: 0 8px 24px -2px rgba(79, 70, 229, 0.28);
	--ec-shadow-glow-emerald: 0 8px 24px -2px rgba(16, 185, 129, 0.25);
	--ec-shadow-glow-amber: 0 8px 24px -2px rgba(245, 158, 11, 0.25);
	--ec-shadow-modal: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 10px 24px -5px rgba(15, 23, 42, 0.1);

	/* Radii - Modern Curves & Pill Elements */
	--ec-radius-sm: 8px;
	--ec-radius-md: 12px;
	--ec-radius-lg: 16px;
	--ec-radius-xl: 20px;
	--ec-radius-2xl: 24px;
	--ec-radius-pill: 9999px;

	/* Transitions */
	--ec-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ec-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	--ec-transition-fast: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}