/**
 * PolishEng Website Framework — static CSS variable fallbacks.
 *
 * Dynamic values from plugin settings are injected via <style id="peng-css-variables">
 * in the document head. This file provides safe defaults before that injection
 * and documents the full token set.
 *
 * All selectors are scoped with the peng- prefix. Do not add unprefixed rules.
 */

:root {
	--peng-primary: #FF0100;
	--peng-black: #000000;
	--peng-white: #FFFFFF;
	--peng-background: #FFFFFF;
	--peng-surface: #F6F6F6;
	--peng-text: #000000;
	--peng-muted: #6D6D6D;
	--peng-border: rgba(0, 0, 0, 0.12);

	--peng-font-ar: "Cairo", sans-serif;
	--peng-font-en: "Space Grotesk", sans-serif;
	--peng-font: var(--peng-font-en);

	--peng-container: 1280px;
	--peng-radius-sm: 8px;
	--peng-radius-md: 14px;
	--peng-radius-lg: 24px;
	--peng-button-height: 48px;
	--peng-section-space: clamp(72px, 8vw, 130px);

	--peng-direction: ltr;
	--peng-transition: 200ms ease;
	--peng-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--peng-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.peng-rtl,
.peng-lang-ar,
html[dir="rtl"] .peng-framework,
body.peng-rtl,
body.peng-lang-ar {
	--peng-font: var(--peng-font-ar);
	--peng-direction: rtl;
}

.peng-ltr,
.peng-lang-en,
html[dir="ltr"] .peng-framework,
body.peng-ltr,
body.peng-lang-en {
	--peng-font: var(--peng-font-en);
	--peng-direction: ltr;
}