/* ============================================
   Local font faces
   ============================================ */

@font-face {
	font-family: "Poppins";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Poppins";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Poppins";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Poppins";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Playfair Display";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Oooh Baby";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/OoohBaby-Regular.ttf") format("truetype");
}


:root {
	/* Palette (spec colours) */
	--color-jean: #3B5D8C;
	--color-jean-hover: #2F4A75;
	--color-bluegrey: #DCE3EA;
	--color-steel: #B9C7D6;
	--color-mostaza: #F7B233;
	--color-mostaza-hover: #DD9A22;
	--color-bone: #F7F7F7;
	--color-white: #FFFFFF;

	/* Derived colours */
	--color-separator: rgba(59, 93, 140, 0.25);

	/* Themed (per-variant) */
	--color-surface: #EFF1F4;
	--color-footer: var(--color-bluegrey);

	/* Typography */
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-script: "Oooh Baby", cursive;

	/* Shape */
	--radius-pill: 8px;
	--radius-card: 16px;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 48px;
	--space-2xl: 80px;

	/* Layout */
	--container-max: 1400px;
	--page-x: 48px;

	/* Motion */
	--transition-fast: 0.2s;

	/* Breakpoints — reference only; @media values must be literal */
	--breakpoint-mobile: 700px;
}

[data-theme="steel"] {
	--color-surface: var(--color-bluegrey);
	--color-footer: var(--color-steel);
}