/* ============================================
   Global Typography & Design Tokens
   Smartdeco / editorial-room style — site-wide
   Activated op ALLE pagina's (niet alleen editorial-room).
   Maakt Elementor's typography-dependency overbodig.
   ============================================ */

:root {
	/* Backgrounds */
	--sd-bg:        oklch(97% 0.005 60);    /* warm off-white */
	--sd-bg-warm:   oklch(95% 0.008 60);    /* warmer panel */
	--sd-bg-soft:   #faf8f5;                 /* zachte tint voor sections */

	/* Ink (text colors) */
	--sd-ink:       oklch(20% 0.01 40);     /* primary text */
	--sd-ink-soft:  oklch(40% 0.01 40);     /* secondary text */
	--sd-ink-muted: oklch(58% 0.008 40);    /* meta / muted */

	/* Lines / borders */
	--sd-line:      oklch(88% 0.008 60);

	/* Raku accent (the warm rood-tan) */
	--sd-raku:      oklch(40% 0.10 30);
	--sd-raku-soft: oklch(52% 0.09 30);
	--sd-raku-ink:  oklch(28% 0.07 30);

	/* Type families */
	--sd-display:   "Fraunces", Georgia, "Times New Roman", serif;
	--sd-body:      "Plus Jakarta Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing scale (utility) */
	--sd-radius:    8px;
}

/* ============================================
   Body — defaults voor hele site
   ============================================ */

body {
	font-family: var(--sd-body) !important;
	color: var(--sd-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ============================================
   Headings — Fraunces serif
   ============================================ */

body h1, body h2, body h3, body h4, body h5, body h6,
.entry-title, .product_title, .page-title,
.heading-title, .widget-title, .woocommerce-Tabs-panel h2 {
	font-family: var(--sd-display) !important;
	color: var(--sd-ink);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

body h1, .entry-title, .product_title { font-size: clamp(2rem, 3.5vw, 2.75rem); }
body h2                                { font-size: clamp(1.5rem, 2.5vw, 2rem); }
body h3                                { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

/* ============================================
   Links & accents
   ============================================ */

body a {
	color: var(--sd-raku);
	transition: color .15s ease;
}
body a:hover { color: var(--sd-raku-ink); }

/* Sterk + accenten in body-tekst */
body strong, body b { color: var(--sd-ink); font-weight: 600; }
body em { color: var(--sd-ink-soft); }

/* ============================================
   WooCommerce — product titles + prijs
   ============================================ */

.products .product .woocommerce-loop-product__title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--sd-display) !important;
	font-weight: 500;
	color: var(--sd-ink);
}

.woocommerce .price,
.woocommerce-Price-amount {
	font-family: var(--sd-body) !important;
	color: var(--sd-ink);
	font-weight: 600;
}

/* ============================================
   Breadcrumbs + meta — wat softer
   ============================================ */

.breadcrumbs, .breadcrumb,
.woocommerce-breadcrumb,
.posted_in, .tagged_as {
	font-family: var(--sd-body) !important;
	color: var(--sd-ink-muted);
	font-size: 0.875rem;
}

.breadcrumbs a, .breadcrumb a {
	color: var(--sd-ink-soft);
}

/* ============================================
   Forms — match brand
   ============================================ */

body input[type="text"],
body input[type="email"],
body input[type="number"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body input[type="password"],
body textarea,
body select {
	font-family: var(--sd-body) !important;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	color: var(--sd-ink);
}

body input:focus, body textarea:focus, body select:focus {
	outline: none;
	border-color: var(--sd-raku);
	box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.15);
}

/* ============================================
   Buttons — primary = dark, accent = raku
   Override Loobek's default WC button styling
   ============================================ */

body .button,
body button[type="submit"],
body .wp-block-button__link,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce-page button.button,
body input[type="submit"] {
	font-family: var(--sd-body) !important;
	font-weight: 600;
	border-radius: var(--sd-radius);
	letter-spacing: 0;
	transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

/* ============================================
   Lists — body content readability
   ============================================ */

body .entry-content ul li,
body .entry-content ol li,
body .post-content ul li,
body .post-content ol li {
	margin-bottom: 0.5em;
	color: var(--sd-ink);
}

/* ============================================
   Hr / dividers
   ============================================ */

body hr {
	border: none;
	border-top: 1px solid var(--sd-line);
	margin: 2em 0;
}

/* ============================================
   Footer area — laat onze native footer-block met rust
   (sd-footer-native heeft eigen scope met --sd-* tokens)
   ============================================ */

/* Niets — footer.php heeft eigen sd-footer-block scope */