/**
 * MRD v2 "Modern Tegas": design tokens (sumber kebenaran design system).
 *
 * Palet (sinkron manual dengan theme.json; token semantik merujuk preset WordPress dengan fallback literal):
 *   accent       #E76A23  isi tombol dan band, marker list, focus ring
 *   accent-soft  #F7E0D2  marker judul, kotak catatan, avatar inisial
 *   ink          #1C1B1A  teks utama
 *   muted        #5E5A55  teks redup
 *   canvas       #FAFAF9  latar halaman
 *   surface      #F4F3F1  permukaan halus
 *
 * Token turunan aksen (accent-ink, accent-text, focus, accent-soft dark) dihitung inc/color.php.
 * Nilai di file ini adalah hasil perhitungan untuk #E76A23; warna custom ditimpa lewat CSS inline.
 *
 * Aturan radius: media besar dan container 16px, thumbnail dan kartu kecil 12px,
 * kontrol (tombol, input, chip) 8px, avatar 10px. Alasan tiap aturan: docs/DESIGN.md.
 */

/*
 * Fallback bermetrik: font sistem disesuaikan ke ukuran font asli supaya teks tidak bergeser saat
 * font selesai dimuat. Rasio lebar diukur di Chrome dengan teks berbahasa Indonesia. Bricolage
 * punya sumbu optical size yang merapat di ukuran besar, jadi rasionya diambil di 34px (judul
 * section), di antara judul kartu (sekitar 101%) dan judul artikel (sekitar 95%).
 */
@font-face {
	font-family: "Bricolage Grotesque Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
	font-weight: 700;
	size-adjust: 99.15%;
	ascent-override: 93.8%;
	descent-override: 27.23%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Playfair Display Fallback";
	src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
	font-weight: 700;
	size-adjust: 105.89%;
	ascent-override: 102.18%;
	descent-override: 23.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
	size-adjust: 104.98%;
	ascent-override: 98.88%;
	descent-override: 21.15%;
	line-gap-override: 0%;
}

:root {
	/* Warna */
	--color-bg: var(--wp--preset--color--canvas, #FAFAF9);
	--color-surface: var(--wp--preset--color--surface, #F4F3F1);
	--color-surface-2: #EAE8E5;
	--color-border: #E4E1DD;
	--color-border-strong: #8A847D;
	--color-text: var(--wp--preset--color--ink, #1C1B1A);
	--color-text-muted: var(--wp--preset--color--muted, #5E5A55);
	--color-headline: var(--color-text);
	--color-accent: var(--wp--preset--color--accent, #E76A23);
	--color-accent-ink: #1C1B1A;
	--color-accent-text: #A64C19;
	--color-accent-soft: var(--wp--preset--color--accent-soft, #F7E0D2);
	--color-focus: #E76A23;
	--color-inverse: #1C1B1A;
	--color-inverse-text: #FAFAF9;
	--shadow-float: 0 18px 40px -12px rgb(66 44 24 / 0.22), 0 2px 8px rgb(66 44 24 / 0.08);

	/*
	 * Primitif untuk area berlatar (data-surface). Tidak bergantung mode: area gelap di halaman
	 * terang tetap butuh varian gelap dari warna aksen. Nilainya ikut warna aksen dari Customizer.
	 */
	--accent-text-dark: #ED8E58;
	--accent-soft-dark: #472816;
	--accent-surface: #E76A23;
	--accent-contrast: #FAFAF9;
	--accent-scheme: light;

	/*
	 * Alias palet halaman. Dideklarasikan sekali di sini dan tidak pernah didefinisikan ulang di
	 * dalam area berlatar, jadi area bisa merujuk warna halaman tanpa rujukan melingkar.
	 */
	--page-bg: var(--color-bg);
	--page-surface: var(--color-surface);
	--page-surface-2: var(--color-surface-2);
	--page-border: var(--color-border);
	--page-border-strong: var(--color-border-strong);
	--page-text: var(--color-text);
	--page-text-muted: var(--color-text-muted);
	--page-headline: var(--color-headline);
	--page-accent: var(--color-accent);
	--page-accent-ink: var(--color-accent-ink);
	--page-accent-text: var(--color-accent-text);
	--page-accent-soft: var(--color-accent-soft);
	--page-focus: var(--color-focus);
	--page-inverse: var(--color-inverse);
	--page-inverse-text: var(--color-inverse-text);
	--page-shadow-float: var(--shadow-float);

	/* Tipografi */
	--font-heading: var(--wp--preset--font-family--display, "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, sans-serif);
	--font-body: var(--wp--preset--font-family--sans, "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--heading-weight: 700;
	--heading-tracking: -0.022em;
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	--text-2xl: clamp(2rem, 1.25rem + 2.8vw, 3.375rem);
	--text-3xl: clamp(2.25rem, 1.3rem + 3.6vw, 3.875rem);
	--text-display: clamp(2.75rem, 1.4rem + 5.5vw, 5.75rem);
	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.6;
	--leading-prose: 1.75;

	/* Ruang (kelipatan 4px) */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;
	--space-section: clamp(3rem, 6vw, 5.5rem);

	/* Layout dan bentuk */
	--container-max: 1200px;
	/* Kolom baca artikel: sekitar 73 karakter per baris pada teks 18px. Sama dengan contentSize di theme.json. */
	--content-max: 640px;
	/* Kepala artikel dan halaman (judul, dek, byline); iklan di atas artikel ikut lebar ini. */
	--head-max: 880px;
	--header-height: 64px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-avatar: 10px;

	/* Logo gambar dibuat untuk latar terang; di mode gelap diberi pelat terang supaya tetap terbaca.
	   Logo terang memakai kebalikannya (data-logo="light", di bawah). */
	--logo-plate: transparent;
	--logo-plate-space: 0px;

	/* Gerak */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 360ms;

	/* Lapisan */
	--z-header: 20;
	--z-dropdown: 30;
	--z-dialog: 40;
	--z-skip: 50;

	/* Ikon centang untuk daftar gaya "Centang" (Phosphor check) */
	--mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

	color-scheme: light;
}

@media (max-width: 767.98px) {
	:root {
		--header-height: 56px;
	}
}

/*
 * Dark mode. Preset WordPress ikut di-override supaya class has-*-color di konten juga berganti.
 * Selector berspesifisitas (0,2,0) sehingga menang atas :root global styles apa pun urutan cetaknya.
 * Aksen dan teks di atas aksen sengaja tidak didefinisikan ulang: sama di kedua mode.
 */
:root[data-theme="dark"] {
	--wp--preset--color--canvas: #141312;
	--wp--preset--color--surface: #1D1B19;
	--wp--preset--color--ink: #EDEBE7;
	--wp--preset--color--muted: #A6A09A;
	--wp--preset--color--accent-soft: #472816;
	--color-surface-2: #272422;
	--color-border: #34302D;
	--color-border-strong: #6F6A64;
	--color-accent-text: #ED8E58;
	--color-focus: #E76A23;
	--color-inverse: #141312;
	--color-inverse-text: #EDEBE7;
	--shadow-float: 0 18px 40px -12px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4);
	--logo-plate: #FAFAF9;
	--logo-plate-space: 0.375rem;

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--wp--preset--color--canvas: #141312;
		--wp--preset--color--surface: #1D1B19;
		--wp--preset--color--ink: #EDEBE7;
		--wp--preset--color--muted: #A6A09A;
		--wp--preset--color--accent-soft: #472816;
		--color-surface-2: #272422;
		--color-border: #34302D;
		--color-border-strong: #6F6A64;
		--color-accent-text: #ED8E58;
		--color-focus: #E76A23;
		--color-inverse: #141312;
		--color-inverse-text: #EDEBE7;
		--shadow-float: 0 18px 40px -12px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4);
		--logo-plate: #FAFAF9;
		--logo-plate-space: 0.375rem;

		color-scheme: dark;
	}
}

/*
 * Area berlatar: header, bar sorotan, footer, dan section beranda yang diberi data-surface.
 * Tiap blok mendefinisikan ulang token warna di elemennya sendiri, sehingga komponen di dalamnya
 * ikut tanpa CSS tambahan. Supaya tidak ada rujukan melingkar, blok hanya merujuk --page-*,
 * primitif --accent-*, literal, atau token --color-* lain di blok yang sama (satu arah).
 * Preset WordPress ikut diarahkan ulang supaya blok ber-class has-*-color di dalamnya terbaca.
 */
[data-surface="soft"] {
	--color-bg: var(--page-surface);
	--color-surface: var(--page-surface-2);
	--color-focus: var(--page-accent-text);
	--wp--preset--color--canvas: var(--page-surface);
	--wp--preset--color--surface: var(--page-surface-2);

	background-color: var(--color-bg);
}

/* Palet gelap yang sama di kedua mode; di mode gelap tampil sebagai permukaan yang sedikit terangkat. */
[data-surface="dark"] {
	--color-bg: #1C1B1A;
	--color-surface: #272422;
	--color-surface-2: #312E2B;
	--color-border: #3D3935;
	--color-border-strong: #7A746D;
	--color-text: #EDEBE7;
	--color-text-muted: #A6A09A;
	--color-headline: var(--headline-dark, var(--color-text));
	--color-accent-text: var(--accent-text-dark);
	--color-accent-soft: var(--accent-soft-dark);
	--color-focus: var(--accent-text-dark);
	--color-inverse: #FAFAF9;
	--color-inverse-text: #1C1B1A;
	--shadow-float: 0 18px 40px -12px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4);
	--logo-plate: #FAFAF9;
	--logo-plate-space: 0.375rem;
	--wp--preset--color--canvas: #1C1B1A;
	--wp--preset--color--surface: #272422;
	--wp--preset--color--ink: #EDEBE7;
	--wp--preset--color--muted: #A6A09A;
	--wp--preset--color--accent-soft: var(--accent-soft-dark);

	color: var(--color-text);
	background-color: var(--color-bg);
	color-scheme: dark;
}

/*
 * Di atas warna aksen semua teks memakai warna teks-di-atas-aksen, dan isian (tombol, blok judul)
 * berbalik menjadi warna itu dengan teks bernada kebalikannya.
 */
[data-surface="accent"] {
	--color-bg: var(--accent-surface);
	--color-surface: color-mix(in srgb, var(--accent-contrast) 12%, var(--accent-surface));
	--color-surface-2: color-mix(in srgb, var(--accent-contrast) 22%, var(--accent-surface));
	--color-border: color-mix(in srgb, var(--page-accent-ink) 28%, var(--accent-surface));
	--color-border-strong: var(--page-accent-ink);
	--color-text: var(--page-accent-ink);
	--color-text-muted: var(--page-accent-ink);
	--color-headline: var(--page-accent-ink);
	--color-accent: var(--page-accent-ink);
	--color-accent-ink: var(--accent-contrast);
	--color-accent-text: var(--page-accent-ink);
	--color-accent-soft: color-mix(in srgb, var(--accent-contrast) 30%, var(--accent-surface));
	--color-focus: var(--page-accent-ink);
	--color-inverse: var(--page-accent-ink);
	--color-inverse-text: var(--accent-contrast);
	--shadow-float: 0 18px 40px -12px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.12);
	--logo-plate: #FAFAF9;
	--logo-plate-space: 0.375rem;
	--wp--preset--color--canvas: var(--accent-surface);
	--wp--preset--color--surface: color-mix(in srgb, var(--accent-contrast) 12%, var(--accent-surface));
	--wp--preset--color--ink: var(--page-accent-ink);
	--wp--preset--color--muted: var(--page-accent-ink);
	--wp--preset--color--accent: var(--page-accent-ink);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--accent-contrast) 30%, var(--accent-surface));

	color: var(--color-text);
	background-color: var(--color-bg);
	color-scheme: var(--accent-scheme);
}

/*
 * Logo terang (pengaturan "Logo berwarna terang", data-logo di <html>): pelat dibalik. Di latar
 * terang dan aksen logo diberi pelat gelap; di area gelap dan mode gelap tampil tanpa pelat.
 */
:root[data-logo="light"],
:root[data-logo="light"] [data-surface="accent"] {
	--logo-plate: #1C1B1A;
	--logo-plate-space: 0.375rem;
}

:root[data-logo="light"][data-theme="dark"],
:root[data-logo="light"] [data-surface="dark"] {
	--logo-plate: transparent;
	--logo-plate-space: 0px;
}

@media (prefers-color-scheme: dark) {
	:root[data-logo="light"]:not([data-theme]) {
		--logo-plate: transparent;
		--logo-plate-space: 0px;
	}
}

/* Dropdown dan panel mega menu melayang di atas halaman, jadi kembali ke palet halaman. */
[data-surface] .sub-menu,
[data-surface] .mega-panel {
	--color-bg: var(--page-bg);
	--color-surface: var(--page-surface);
	--color-surface-2: var(--page-surface-2);
	--color-border: var(--page-border);
	--color-border-strong: var(--page-border-strong);
	--color-text: var(--page-text);
	--color-text-muted: var(--page-text-muted);
	--color-headline: var(--page-headline);
	--color-accent: var(--page-accent);
	--color-accent-ink: var(--page-accent-ink);
	--color-accent-text: var(--page-accent-text);
	--color-accent-soft: var(--page-accent-soft);
	--color-focus: var(--page-focus);
	--color-inverse: var(--page-inverse);
	--color-inverse-text: var(--page-inverse-text);
	--shadow-float: var(--page-shadow-float);

	color: var(--color-text);
}