/**
 * Design tokens — Fontrilla
 *
 * Semua komponen theme WAJIB memakai custom properties ini. Jangan hardcode
 * warna/tipe/spacing di stylesheet komponen; timpa hanya via :root overrides
 * di assets/css/seasonal/*.css (mode musiman hanya mengubah token warna +
 * class .fon-ornament / .fon-seasonal-banner — layout/blok tidak berubah).
 */

:root {
	/* Warna brand */
	--fon-color-primary: #5b2d8e;
	--fon-color-secondary: #2b1a4d;
	--fon-color-accent: #f5a623;
	--fon-color-bg: #faf8fd;
	--fon-color-text: #231f2b;
	--fon-color-muted: #6f6880;

	/* Tipe — heading memakai Poppins 800/900 (brand font) */
	--fon-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--fon-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--fon-font-weight-heading: 800;
	--fon-font-weight-heading-black: 900;

	/* Skala spacing */
	--fon-space-0: 0;
	--fon-space-1: 0.25rem;
	--fon-space-2: 0.5rem;
	--fon-space-3: 0.75rem;
	--fon-space-4: 1rem;
	--fon-space-5: 1.5rem;
	--fon-space-6: 2rem;
	--fon-space-7: 3rem;
	--fon-space-8: 4rem;

	/* Radius */
	--fon-radius-sm: 4px;
	--fon-radius-md: 8px;
	--fon-radius-lg: 16px;
	--fon-radius-pill: 999px;

	/* Bayangan */
	--fon-shadow-sm: 0 1px 2px rgba(35, 31, 43, 0.08);
	--fon-shadow-md: 0 4px 12px rgba(35, 31, 43, 0.12);
	--fon-shadow-lg: 0 12px 32px rgba(35, 31, 43, 0.16);
}

/* Base — semua memakai token */
body {
	background: var(--fon-color-bg);
	color: var(--fon-color-text);
	font-family: var(--fon-font-body);
	line-height: 1.6;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fon-font-heading);
	font-weight: var(--fon-font-weight-heading);
	color: var(--fon-color-secondary);
	line-height: 1.2;
}

a {
	color: var(--fon-color-primary);
}

a:hover {
	color: var(--fon-color-accent);
}

.fon-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--fon-space-4);
}

.fon-button {
	display: inline-block;
	background: var(--fon-color-primary);
	color: #fff;
	padding: var(--fon-space-2) var(--fon-space-5);
	border-radius: var(--fon-radius-pill);
	text-decoration: none;
	font-family: var(--fon-font-heading);
	font-weight: var(--fon-font-weight-heading);
	border: 0;
	cursor: pointer;
}

.fon-button:hover {
	background: var(--fon-color-secondary);
	color: #fff;
}

/* Banner musiman — isi di-styling ulang oleh tiap file seasonal */
.fon-seasonal-banner {
	background: var(--fon-color-accent);
	color: var(--fon-color-secondary);
	padding: var(--fon-space-4);
	border-radius: var(--fon-radius-lg);
	box-shadow: var(--fon-shadow-md);
}

/* Ornamen musiman — hanya diisi file seasonal */
.fon-ornament {
	display: block;
}