/**
 * Font Pairing Tool Styles
 *
 * @package SC_Font_Pairing
 */

/* ===== CSS Variables ===== */
:root {
	--sc-fp-primary: #4361ee;
	--sc-fp-primary-hover: #3651d4;
	--sc-fp-border: #396AA8;
	--sc-fp-border-dark: #cbd5e1;
	--sc-fp-text: #1e293b;
	--sc-fp-text-secondary: #64748b;
	--sc-fp-bg: #ffffff;
	--sc-fp-bg-secondary: #f8fafc;
	--sc-fp-radius: 12px;
	--sc-fp-radius-sm: 4px;
	--sc-fp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--sc-fp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--sc-fp-transition: all 0.2s ease;
}

/* ===== Container ===== */
.sc-fp-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 0;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--sc-fp-text);
	box-sizing: border-box;
}

/* Ensure all child elements use border-box */
.sc-fp-container *,
.sc-fp-container *::before,
.sc-fp-container *::after {
	box-sizing: border-box;
}