/**
 * Design tokens from _8/code.html Tailwind config and base layer.
 * Not from DESIGN.md when the two conflict.
 */

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--eco-primary: #123c32;
	--eco-primary-dark: #0b2620;
	--eco-primary-container: #1d4d41;
	--eco-secondary: #18765b;
	--eco-secondary-light: #82d7b6;
	--eco-accent: #269373;
	--eco-background: #faf9f5;
	--eco-surface: #ffffff;
	--eco-surface-muted: #f3f2ec;
	--eco-surface-subtle: #ebeae2;
	--eco-sage: #dce7df;
	--eco-charcoal: #1a2421;
	--eco-charcoal-muted: #55625d;
	--eco-charcoal-light: #83928c;
	--eco-border: rgba(18, 60, 50, 0.12);
	--eco-border-light: rgba(255, 255, 255, 0.12);
	--eco-white: #ffffff;
	--eco-font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--eco-container: 80rem; /* Tailwind max-w-7xl = 1280px */
	--eco-pad-x: 1.5rem; /* px-6 */
	--eco-pad-x-lg: 3rem; /* lg:px-12 */
	--eco-header-h: 5rem; /* h-20 */
	--eco-utility-h: 2.5rem; /* h-10 */
	--eco-hairline: 1px;
	--eco-section-y: 6rem; /* py-24 */
	--eco-bp-sm: 640px;
	--eco-bp-md: 768px;
	--eco-bp-lg: 1024px;
}