/* ============================================================
   PAJARAN KEREN · DESIGN TOKENS
   Diadopsi dari design system "Verden" (design-reference/tokens/*.css).
   Nilai warna/tipografi/spacing/efek disalin apa adanya; konten & copy
   tetap tentang Desa Pajaran (lihat template-parts/, bukan file ini).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
	/* ---- Brand: Forest (deep teal-green) ---- */
	--forest-950: #043029;
	--forest-900: #00453e; /* primary brand surface */
	--forest-800: #0a544b;
	--forest-700: #14655a;
	--forest-600: #2a7d70;
	--forest-line: #1c5a51;

	/* ---- Brand: Lime (chartreuse accent) ---- */
	--lime-600: #a9d84a;
	--lime-500: #c6ed6a; /* primary accent — tombol, chip aktif, aksen */
	--lime-400: #d3f27f;
	--lime-200: #e7f6c0;
	--lime-100: #f1f9db;

	/* ---- Netral ---- */
	--black: #000000;
	--ink-900: #181818;
	--ink-700: #3d3d3d;
	--ink-500: #5b5b5b;
	--ink-400: #7d7d7d;
	--ink-300: #a6a6a6;
	--line-200: #e4e4e2;
	--line-100: #eeeeec;
	--paper: #f6f6f6;
	--card: #ffffff;
	--white: #ffffff;

	/* ---- Translucent (glass di atas foto) ---- */
	--glass-dark: rgba(18, 22, 20, 0.55);
	--glass-light: rgba(246, 246, 246, 0.14);
	--glass-border: rgba(255, 255, 255, 0.22);

	/* ---- Alias semantik ---- */
	--bg-page: var(--paper);
	--bg-feature: var(--forest-900);
	--bg-footer: var(--black);
	--surface-card: var(--card);
	--text-strong: var(--ink-900);
	--text-body: var(--ink-500);
	--text-muted: var(--ink-400);
	--text-on-dark: #eaf1ee;
	--text-on-dark-muted: rgba(234, 241, 238, 0.62);
	--accent: var(--lime-500);
	--accent-fg: var(--forest-900);
	--border-subtle: var(--line-200);
	--focus-ring: var(--forest-900);

	/* ---- Font ---- */
	--font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: var(--font-sans);
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	--text-display: 68px;
	--text-h1: 52px;
	--text-h2: 40px;
	--text-h3: 28px;
	--text-h4: 22px;
	--text-title: 18px;

	--text-lg: 18px;
	--text-base: 16px;
	--text-sm: 14px;
	--text-xs: 13px;

	--text-label: 13px;
	--text-index: 14px;

	--lh-display: 1.04;
	--lh-heading: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.55;

	--ls-display: -0.02em;
	--ls-heading: -0.015em;
	--ls-normal: 0em;
	--ls-label: 0.06em;
	--ls-wide: 0.12em;

	/* ---- Spacing (grid basis 4px) ---- */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	--container-max: 1280px;
	--gutter: 24px;
	--section-y: 112px;
	--card-pad: 28px;

	/* ---- Radius ---- */
	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-pill: 999px;

	/* ---- Shadow ---- */
	--shadow-xs: 0 1px 2px rgba(4, 48, 41, 0.05);
	--shadow-sm: 0 2px 8px rgba(4, 48, 41, 0.06);
	--shadow-md: 0 12px 30px rgba(4, 48, 41, 0.1);
	--shadow-lg: 0 24px 60px rgba(4, 48, 41, 0.14);
	--shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.24);

	--blur-glass: 16px;
	--ring-focus: 0 0 0 3px rgba(0, 69, 62, 0.35);
	--ring-accent: 0 0 0 3px rgba(198, 237, 106, 0.5);

	--scrim-bottom: linear-gradient(to top, rgba(6, 30, 26, 0.72) 0%, rgba(6, 30, 26, 0) 60%);

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 140ms;
	--dur-base: 220ms;
	--dur-slow: 420ms;
}