/**
 * Design tokens for custom Gutenberg blocks.
 * Values mirror tailwind.config.js so blocks stay in sync with the rest of the theme.
 * Loaded on the frontend and inside the block editor — never hardcode these values in block styles.
 */

/* Font faces duplicated from src/style.css: assets/main.css only loads on the
   frontend, so the block editor iframe needs its own copy to render blocks
   with the same typography as the live site. */
@font-face {
	font-family: "Namu";
	src: url( "../../public/fonts/NAMU-1960.ttf" ) format( "truetype" ),
		url( "../../public/fonts/NAMU-1960.woff" ) format( "woff" ),
		url( "../../public/fonts/NAMU-1960.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "InterRegular";
	src: url( "../../public/fonts/Inter-Regular.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "InterSemiBold";
	src: url( "../../public/fonts/Inter-SemiBold.woff2" ) format( "woff2" );
}

:root {
	--wo-color-grey: #E2D6CA;
	--wo-color-blue: #006EB2;
	--wo-color-purple: #3C153B;
	--wo-color-red-light: #F0DEDA;
	--wo-color-red-black: #8A1E3F;
	--wo-color-red: #B45847;
	--wo-color-green-light: #A3CDCA;
	--wo-color-green: #02312E;
	--wo-color-yellow-light-max: #FFF8F2;
	--wo-color-yellow-light: #FBEADA;
	--wo-color-yellow: #EA9445;
	--wo-color-beige-light: #FAF4F1;
	--wo-color-beige: #CB8E73;
	--wo-color-white: #FFFFFF;
	--wo-color-black: #1D1208;
	--wo-color-text-black: #34200F;

	--wo-radius-sm: 16px;
	--wo-radius-md: 1.375rem;
	--wo-radius-lg: 1.75rem;
	--wo-radius-xl: 4rem;
	--wo-radius-full: 9999px;
	--wo-radius-large: 32px;

	--wo-font-display: "Namu", Arial, sans-serif;
	--wo-font-body: "InterRegular", Arial, sans-serif;
	--wo-font-semi: "InterSemiBold", Arial, sans-serif;

	--wo-space-section-y: 6rem;
	--wo-space-section-y-mobile: 3rem;
	--wo-space-section-x: 2rem;
	--wo-space-section-x-mobile: 1rem;
	--wo-gap: 2rem;
	--wo-gap-mobile: 1.5rem;
}

/* Maps the theme's editor-color-palette (functions.php: wotheme_setup) to CSS custom
   properties so native block color supports (backgroundColor/textColor) render correctly. */
.has-grey-color { color: var(--wo-color-grey); }
.has-grey-background-color { background-color: var(--wo-color-grey); }
.has-blue-color { color: var(--wo-color-blue); }
.has-blue-background-color { background-color: var(--wo-color-blue); }
.has-purple-color { color: var(--wo-color-purple); }
.has-purple-background-color { background-color: var(--wo-color-purple); }
.has-red-light-color { color: var(--wo-color-red-light); }
.has-red-light-background-color { background-color: var(--wo-color-red-light); }
.has-red-black-color { color: var(--wo-color-red-black); }
.has-red-black-background-color { background-color: var(--wo-color-red-black); }
.has-red-color { color: var(--wo-color-red); }
.has-red-background-color { background-color: var(--wo-color-red); }
.has-green-light-color { color: var(--wo-color-green-light); }
.has-green-light-background-color { background-color: var(--wo-color-green-light); }
.has-green-color { color: var(--wo-color-green); }
.has-green-background-color { background-color: var(--wo-color-green); }
.has-yellow-light-max-color { color: var(--wo-color-yellow-light-max); }
.has-yellow-light-max-background-color { background-color: var(--wo-color-yellow-light-max); }
.has-yellow-light-color { color: var(--wo-color-yellow-light); }
.has-yellow-light-background-color { background-color: var(--wo-color-yellow-light); }
.has-yellow-color { color: var(--wo-color-yellow); }
.has-yellow-background-color { background-color: var(--wo-color-yellow); }
.has-beige-light-color { color: var(--wo-color-beige-light); }
.has-beige-light-background-color { background-color: var(--wo-color-beige-light); }
.has-beige-color { color: var(--wo-color-beige); }
.has-beige-background-color { background-color: var(--wo-color-beige); }
.has-white-color { color: var(--wo-color-white); }
.has-white-background-color { background-color: var(--wo-color-white); }
.has-black-color { color: var(--wo-color-black); }
.has-black-background-color { background-color: var(--wo-color-black); }
.has-text-black-color { color: var(--wo-color-text-black); }
.has-text-black-background-color { background-color: var(--wo-color-text-black); }