/* ================================================================
   SB Webmarketing — Preview Design Tokens

   This file replicates the CSS custom properties that WordPress
   generates from theme.json. It is ONLY used by preview.html
   for static rendering outside of WordPress.

   DO NOT include this file in the WordPress theme — WordPress
   will generate these variables automatically from theme.json.
   ================================================================ */

/* ---------------------------------------------------------------
   @font-face — Local Inter .woff2 files
   --------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Inter-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

/* ---------------------------------------------------------------
   WordPress-equivalent CSS Custom Properties
   Generated from theme.json settings
   --------------------------------------------------------------- */
:root {
	/* Colors — from settings.color.palette */
	--wp--preset--color--background: #FFFFFF;
	--wp--preset--color--background-alt: #F5F5F7;
	--wp--preset--color--surface: #FAFAFA;
	--wp--preset--color--text-primary: #0A2540;
	--wp--preset--color--text-secondary: #425466;
	--wp--preset--color--accent: #335BFF;
	--wp--preset--color--accent-hover: #0A2540;
	--wp--preset--color--dark: #0A2540;
	--wp--preset--color--border: #D2D2D7;
	--wp--preset--color--white: #FFFFFF;

	/* Font families — from settings.typography.fontFamilies */
	--wp--preset--font-family--primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Font sizes — from settings.typography.fontSizes */
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--medium: 1rem;
	--wp--preset--font-size--large: 1.25rem;
	--wp--preset--font-size--x-large: 1.5rem;
	--wp--preset--font-size--xx-large: clamp(1.75rem, 3vw, 2.5rem);
	--wp--preset--font-size--hero: clamp(2.5rem, 5vw, 4.5rem);

	/* Spacing — from settings.spacing.spacingSizes */
	--wp--preset--spacing--10: 0.5rem;
	--wp--preset--spacing--20: 1rem;
	--wp--preset--spacing--30: 1.5rem;
	--wp--preset--spacing--40: 2rem;
	--wp--preset--spacing--50: 3rem;
	--wp--preset--spacing--60: 5rem;
	--wp--preset--spacing--70: 8rem;

	/* Layout — from settings.layout */
	--wp--style--global--content-size: 768px;
	--wp--style--global--wide-size: 1200px;
}

/* ---------------------------------------------------------------
   Global Styles — from styles in theme.json
   --------------------------------------------------------------- */
body {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	background-color: var(--wp--preset--color--background);
	margin: 0;
	padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text-primary);
	margin-top: 0;
}

h1 { font-size: var(--wp--preset--font-size--hero); }
h2 { font-size: var(--wp--preset--font-size--xx-large); }
h3 { font-size: var(--wp--preset--font-size--x-large); }

/* Links */
a {
	color: var(--wp--preset--color--accent);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--wp--preset--color--accent-hover);
}

/* Paragraphs */
p {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Separator */
hr {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Blockquotes */
blockquote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--30);
	margin: 0;
}