/*
|--------------------------------------------------------------------------
| NejaCare Global Design System
|--------------------------------------------------------------------------
|
| Version: 1.0
| Purpose: Global brand tokens for the NejaCare WordPress frontend.
|
|--------------------------------------------------------------------------
*/


:root {

	/*
	|--------------------------------------------------------------------------
	| Brand Colors
	|--------------------------------------------------------------------------
	*/

	--nejacare-primary: #0F766E;
	--nejacare-primary-hover: #115E59;
	--nejacare-accent: #14B8A6;


	/*
	|--------------------------------------------------------------------------
	| Text Colors
	|--------------------------------------------------------------------------
	*/

	--nejacare-heading: #1E293B;
	--nejacare-body: #475569;
	--nejacare-muted: #64748B;


	/*
	|--------------------------------------------------------------------------
	| Surface Colors
	|--------------------------------------------------------------------------
	*/

	--nejacare-white: #FFFFFF;
	--nejacare-surface: #FFFFFF;
	--nejacare-background: #F8FAFC;


	/*
	|--------------------------------------------------------------------------
	| Border Colors
	|--------------------------------------------------------------------------
	*/

	--nejacare-border: #E2E8F0;


	/*
	|--------------------------------------------------------------------------
	| Status Colors
	|--------------------------------------------------------------------------
	*/

	--nejacare-success: #22C55E;
	--nejacare-warning: #F59E0B;
	--nejacare-danger: #EF4444;


	/*
	|--------------------------------------------------------------------------
	| Typography
	|--------------------------------------------------------------------------
	*/

	--nejacare-heading-font: "Manrope", sans-serif;
	--nejacare-body-font: "Inter", sans-serif;


	/*
	|--------------------------------------------------------------------------
	| Font Sizes
	|--------------------------------------------------------------------------
	*/

	--nejacare-text-xs: 12px;
	--nejacare-text-sm: 14px;
	--nejacare-text-md: 16px;
	--nejacare-text-lg: 17px;
	--nejacare-text-xl: 20px;

	--nejacare-heading-h6: 18px;
	--nejacare-heading-h5: 20px;
	--nejacare-heading-h4: 24px;
	--nejacare-heading-h3: 30px;
	--nejacare-heading-h2: 36px;
	--nejacare-heading-h1: 44px;


	/*
	|--------------------------------------------------------------------------
	| Font Weights
	|--------------------------------------------------------------------------
	*/

	--nejacare-weight-regular: 400;
	--nejacare-weight-medium: 500;
	--nejacare-weight-semibold: 600;
	--nejacare-weight-bold: 700;


	/*
	|--------------------------------------------------------------------------
	| Line Heights
	|--------------------------------------------------------------------------
	*/

	--nejacare-line-tight: 1.2;
	--nejacare-line-normal: 1.5;
	--nejacare-line-body: 1.8;


	/*
	|--------------------------------------------------------------------------
	| Border Radius
	|--------------------------------------------------------------------------
	*/

	--nejacare-radius-sm: 4px;
	--nejacare-radius-md: 8px;
	--nejacare-radius-lg: 12px;
	--nejacare-radius-xl: 16px;
	--nejacare-radius-pill: 999px;


	/*
	|--------------------------------------------------------------------------
	| Spacing
	|--------------------------------------------------------------------------
	*/

	--nejacare-space-xs: 4px;
	--nejacare-space-sm: 8px;
	--nejacare-space-md: 16px;
	--nejacare-space-lg: 24px;
	--nejacare-space-xl: 32px;
	--nejacare-space-2xl: 48px;
	--nejacare-space-3xl: 64px;


	/*
	|--------------------------------------------------------------------------
	| Shadows
	|--------------------------------------------------------------------------
	*/

	--nejacare-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);

	--nejacare-shadow-md:
		0 4px 12px rgba(15, 23, 42, 0.08);

	--nejacare-shadow-lg:
		0 10px 30px rgba(15, 23, 42, 0.10);

}


/*
|--------------------------------------------------------------------------
| Global Body Typography
|--------------------------------------------------------------------------
*/

body {

	font-family: var(--nejacare-body-font);
	font-size: var(--nejacare-text-lg);
	font-weight: var(--nejacare-weight-regular);
	line-height: var(--nejacare-line-body);
	color: var(--nejacare-body);

}


/*
|--------------------------------------------------------------------------
| Global Headings
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {

	font-family: var(--nejacare-heading-font);
	color: var(--nejacare-heading);
	line-height: var(--nejacare-line-tight);

}


h1 {
	font-size: var(--nejacare-heading-h1);
	font-weight: var(--nejacare-weight-bold);
}


h2 {
	font-size: var(--nejacare-heading-h2);
	font-weight: var(--nejacare-weight-bold);
}


h3 {
	font-size: var(--nejacare-heading-h3);
	font-weight: var(--nejacare-weight-bold);
}


h4 {
	font-size: var(--nejacare-heading-h4);
	font-weight: var(--nejacare-weight-semibold);
}


h5 {
	font-size: var(--nejacare-heading-h5);
	font-weight: var(--nejacare-weight-semibold);
}


h6 {
	font-size: var(--nejacare-heading-h6);
	font-weight: var(--nejacare-weight-semibold);
}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a {

	color: var(--nejacare-primary);
	transition: color 0.2s ease;

}


a:hover {

	color: var(--nejacare-primary-hover);

}


/*
|--------------------------------------------------------------------------
| Responsive Typography
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 26px;
	}

}


@media (max-width: 480px) {

	h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 24px;
	}

}