/*
 * base.css — token desain, reset, dan tipografi dasar.
 *
 * Dimuat paling awal. File lain (layout.css, components.css) hanya boleh
 * memakai variabel yang didefinisikan di sini, tidak mendefinisikan ulang.
 */

:root {
	/* Warna brand. Dua nilai pertama bisa ditimpa dari Customizer lewat
	   inc/customizer.php, jadi jangan hardcode warnanya di tempat lain. */
	--brand: #6C7ADD;
	--brand-dark: #9667BF;
	--brand-soft: #E4D0F2;

	/* Skala abu untuk teks dan permukaan. */
	--ink: #222222;
	--ink-2: #575760;
	--ink-3: #b2b2be;
	--line: #eaeaea;
	--surface: #ffffff;
	--surface-2: #f7f8f9;
	--surface-3: #f0f0f0;

	/* Warna tautan di dalam badan artikel, sedikit lebih gelap dari brand
	   supaya kontrasnya lolos WCAG AA di atas putih. */
	--link: #865cab;

	/* Tata letak. */
	--container: 1280px;
	--nav-height: 60px;
	--sidebar-width: 320px;

	/* Jarak. Skalanya sengaja kelipatan 10 supaya konsisten. */
	--gap-xs: 10px;
	--gap-sm: 20px;
	--gap-md: 30px;
	--gap-lg: 40px;
	--gap-xl: 50px;
	--section-rhythm: 50px;

	/* Sudut membulat. */
	--radius-xs: 2px;
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-xl: 20px;

	/* Bayangan. Dipakai hemat — hanya untuk elemen yang benar-benar mengambang. */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
	--shadow-md: 0 2px 2px -2px rgba(0, 0, 0, .2);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);

	--font: 'IBM Plex Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--transition: 200ms ease;
}

/* -------------------------------------------------------------------------
 * Reset
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Tipografi
 * ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--gap-xs);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

p {
	margin: 0 0 1.25em;
}

a {
	color: var(--brand);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--ink);
}

strong,
b {
	color: var(--ink);
	font-weight: 600;
}

small {
	font-size: .8125rem;
}

blockquote {
	margin: 1.5em 0;
	padding: .25em 0 .25em 1.25em;
	border-left: 4px solid var(--brand);
	color: var(--ink);
	font-size: 1.125rem;
	font-style: italic;
}

blockquote cite {
	display: block;
	margin-top: .5em;
	color: var(--ink-3);
	font-size: .875rem;
	font-style: normal;
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	background: var(--surface-3);
	padding: .15em .4em;
	border-radius: var(--radius-xs);
	color: var(--ink);
}

pre {
	background: var(--ink);
	color: var(--surface-3);
	padding: var(--gap-sm);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--gap-lg) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: .9375rem;
}

th,
td {
	padding: .75em 1em;
	border: 1px solid var(--line);
	text-align: left;
}

th {
	background: var(--brand-soft);
	color: var(--link);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Aksesibilitas
 * ---------------------------------------------------------------------- */

/* Tautan lompat ke konten: tersembunyi sampai menerima fokus keyboard. */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--gap-sm);
	z-index: 1000;
	background: var(--ink);
	color: var(--surface);
	padding: .75em 1.25em;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	font-size: .875rem;
	font-weight: 600;
	transition: top var(--transition);
}

.skip-link:focus {
	top: 0;
	color: var(--surface);
}

/* Semua elemen interaktif harus punya indikator fokus yang jelas.
   :focus-visible saja supaya klik mouse tidak memunculkan outline. */
:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/*
 * Atribut hidden harus selalu menang atas display apa pun.
 *
 * Beberapa komponen di theme ini memakai display: flex atau grid, dan aturan
 * itu tanpa sengaja menimpa display: none bawaan atribut hidden — akibatnya
 * elemen yang seharusnya tersembunyi tetap ikut tata letak.
 */
[hidden] {
	display: none !important;
}

/* Kelas bantuan untuk teks yang hanya dibaca screen reader. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Preferensi pengguna
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Mode kontras tinggi: pengguna yang memaksa mode ini biasanya karena kesulitan
 * melihat perbedaan warna tipis, jadi bayangan dihilangkan dan garis dipertegas.
 */
@media (prefers-contrast: more) {
	:root {
		--ink-2: #333333;
		--ink-3: #555555;
		--line: #999999;
	}

	.card,
	.widget {
		border: 1px solid var(--line);
	}
}