/* ==========================================================================
   Prodware Design Tokens
   One source of truth for every Prodware widget.
   Mirrors the Figma "Prodware Design Library" + the client's site CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	/* --- COLORS ------------------------------------------------------- */
	--clr-blue:    #456BFF;
	--clr-cyan:    #45CDFF;
	--clr-navy:    #131E42;
	--clr-navyL:   #1B2857;
	--clr-purple:  #905FDF;
	--clr-pink:    #FF71FC;
	--clr-text:    #131E42;
	--clr-body:    #4A5568;
	--clr-muted:   #7A8BA8;
	--clr-white:   #FFFFFF;
	--clr-bgGray:  #F5F7FA;
	--clr-bgLgt:   #EEF0F3;
	--clr-border:  #E2E8F0;
	--clr-bdDark:  rgba(255, 255, 255, 0.12);

	/* --- GRADIENTS ---------------------------------------------------- */
	--grad-primary: linear-gradient(135deg, #456BFF, #FF71FC);
	--grad-blue:    linear-gradient(90deg,  #456BFF, #45CDFF);
	--grad-text:    linear-gradient(270deg, #FF71FC 0%, #456BFF 100%);
	--grad-dark:    linear-gradient(135deg, #456BFF, #131E42);

	/* --- SPACING ------------------------------------------------------ */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 80px;

	/* --- LAYOUT ------------------------------------------------------- */
	--container: min(1280px, 100%);
	--gutter:    40px;
	--section:   40px;
	--card-pad:  20px;
	--col-gap:   15px;

	/* --- RADIUS ------------------------------------------------------- */
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-pill: 50px;

	/* --- SHADOWS ------------------------------------------------------ */
	--shadow-card: 0 8px 32px rgba(19, 30, 66, 0.08);
	--shadow-btn:  0 4px 16px rgba(69, 107, 255, 0.35);
}

/* Responsive token overrides */
@media (max-width: 1024px) {
	:root {
		--gutter:   40px;
		--section:  56px;
		--card-pad: 24px;
		--col-gap:  20px;
	}
}
@media (max-width: 767px) {
	:root {
		--gutter:   20px;
		--section:  20px;
		--card-pad: 20px;
		--col-gap:  16px;
	}
}