/* ==========================================================================
   Monika theme — design tokens + baseline (Odoo 19 port).
   Source of truth: ../monika/theme/monika/assets/css/main.css (WordPress).
   The full component port (hero, cards, contact band, …) is done against
   these tokens — keep them in sync with the WP theme.
   ========================================================================== */

:root {
	--red:        #b01f1b;
	--red-dark:   #8e1815;
	--red-soft:   #c8524e;
	--cream:      #faf6ef;
	--cream-2:    #f2ebdf;
	--paper:      #ffffff;
	--ink:        #241f1c;
	--ink-soft:   #4a423b;
	--muted:      #7c7167;
	--line:       rgba(36, 31, 28, 0.12);
	--line-strong:rgba(36, 31, 28, 0.22);

	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--wrap: 1180px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--radius: 14px;
	--radius-lg: 24px;
	--shadow: 0 18px 50px -24px rgba(36, 31, 28, 0.45);
	--shadow-soft: 0 10px 30px -18px rgba(36, 31, 28, 0.4);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Baseline: warm paper + Inter body, Fraunces display, brand-red selection. */
#wrapwrap {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--cream);
}
/* :where() keeps this at (0,0,1) so component classes (.hero__title etc.)
   can override weight/color like they did against the WP bare-element rule. */
:where(#wrapwrap) :is(h1, h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
}
::selection { background: var(--red); color: #fff; }