/*
 * Brand design tokens. Change colors, fonts or spacing here only — never in
 * a page or in style.css — to keep the whole site's look in one file.
 * Palette: forrealz! "Charcoal & Coral" brand refresh, scoped down from the
 * app's full token set (see forrealz_business/marketing/assets/colors/brand-colors-current.md)
 * to what a marketing site needs.
 */

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/plus-jakarta-sans-700.woff2") format("woff2");
}
:root {
	--color-charcoal: #282828;
	--color-coral: #FF4C52;
	--color-coral-text: #C8323C;
	--color-white: #FFFFFF;
	--color-bg: #F5F4F2;
	--color-muted: #5C5C58;
	--color-border: #E2E1DE;

	--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--max-width: 1200px;

	/* Shadow tint (RGB triplets, not full colors) so every box-shadow in
	   style.css stays tinted to the brand instead of falling back to flat
	   black — plug into rgba(var(--shadow-charcoal), <alpha>). */
	--shadow-charcoal: 40, 40, 40;
	--shadow-coral: 200, 50, 60;

	/* One radius scale for the whole site: sm = form controls/small chips,
	   md = text cards/callouts, lg = media (photos, video, screenshots),
	   pill = buttons/badges. Never hardcode a radius in style.css. */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
}