/**
 * NALA
 * Custom styles
 */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

	/* Colors */
	--nala-bg: #f7f0e6;
	--nala-surface: #fffaf4;
	--nala-text: #33251c;
	--nala-terracotta: #b66b50;
	--nala-sage: #9ba98a;
	--nala-border: #e6d8c8;

	/* Border radius */
	--nala-radius-sm: 8px;
	--nala-radius-md: 16px;
	--nala-radius-lg: 24px;

	/* Spacing */
	--nala-space-xs: 8px;
	--nala-space-sm: 16px;
	--nala-space-md: 24px;
	--nala-space-lg: 40px;
	--nala-space-xl: 64px;

	/* Transitions */
	--nala-transition: 0.25s ease;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--nala-bg);
	color: var(--nala-text);
}


/* =========================================================
   UTILITIES
   ========================================================= */

.nala-card {
	background: var(--nala-surface);
	border: 1px solid var(--nala-border);
	border-radius: var(--nala-radius-md);
}

.nala-hidden {
	display: none !important;
}