/* assets/css/tokens.css — WAJIB di-load sebelum style.css */
:root {
	/* Primary — Hijau Tosca */
	--color-primary: #00af94; /* Alias untuk --color-primary-500 */
	--color-primary-50: #e6f7f5; /* Background ringan */
	--color-primary-100: #ccefe9;
	--color-primary-200: #99dfd4;
	--color-primary-300: #66cfbe;
	--color-primary-400: #33bfa9;
	--color-primary-500: #00af94; /* Tosca Utama */
	--color-primary-600: #008c76; /* Hover state */
	--color-primary-700: #006958; /* Active / Dark mode / Navbar bg */
	--color-primary-800: #00463b;
	--color-primary-900: #00231d; /* Footer background */
	--color-primary-950: #00100d; /* Deepest dark — used in login bg */

	/* Secondary — Coklat Susu (Warm Accent) */
	--color-secondary-50: #faf5f0;
	--color-secondary-100: #f5ebe0;
	--color-secondary-200: #ebd7c1;
	--color-secondary-300: #dec3a3; /* Aksen garis coklat & divider */
	--color-secondary-400: #c9a87c; /* Active underline */
	--color-secondary-500: #b48d5a; /* Coklat Susu Utama */
	--color-secondary-600: #9a7447;
	--color-secondary-700: #7d5c35;
	--color-secondary-800: #5e4526;
	--color-secondary-900: #3d2c17;

	/* Neutral */
	--color-neutral-0: #fdfcfb; /* Background halaman */
	--color-neutral-50: #f8f6f3;
	--color-neutral-100: #eee9e3;
	--color-neutral-200: #d9d1c7;
	--color-neutral-300: #bfb5a8;
	--color-neutral-400: #9e9287;
	--color-neutral-500: #7d7167;
	--color-neutral-600: #5c5249;
	--color-neutral-700: #3d362f; /* Body text */
	--color-neutral-800: #2a2320; /* Heading H1-H2 */
	--color-neutral-900: #1a1613;

	/* Semantic */
	--color-success: #2e9e6b;
	--color-warning: #d4920a;
	--color-error: #c94040;
	--color-info: #2e7db5;

	/* Typography */
	--font-display: "Plus Jakarta Sans", sans-serif;
	--font-body: "Inter", sans-serif;

	/* Spacing */
	--space-1: 0.25rem; /* 4px  */
	--space-2: 0.5rem; /* 8px  */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */
	--space-24: 6rem; /* 96px */

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
	--shadow-tosca: 0 8px 24px rgba(0, 175, 148, 0.12);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 200ms ease;
	--transition-slow: 300ms ease;

	/* Layout */
	--container-max: 1280px;
	--navbar-height: 72px;
}