/* base.css - reset, token desain, tipografi
   Arah visual: slip gaji / buku kas. Judul serif, angka tabular, warna tinta biru. */
:root {
  --c-bg: #f4f6f8;
  --c-surface: #ffffff;
  --c-ink: #17212b;
  --c-muted: #55626f;
  --c-line: #d9dee4;
  --c-primary: #0f4c81;
  --c-primary-dark: #0a3660;
  --c-tint: #e7f0f8;
  --c-warn-bg: #fff6e0;
  --c-warn-line: #e4b64a;
  --c-danger: #a4262c;

  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --maxw: 1120px;
  --measure: 68ch;
}

/* Satu keluarga font untuk seluruh situs. Hierarki dibentuk lewat ukuran/berat
   H1-H6, bukan lewat pergantian jenis huruf, supaya tiap halaman terasa konsisten. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1rem/1.65 var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.25; margin: 0 0 .6em; color: var(--c-ink); }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; margin-top: 2.4rem; font-weight: 700; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; font-weight: 700; }
h4 { font-size: 1rem; margin-top: 1.3rem; font-weight: 700; }
h5 { font-size: .92rem; margin-top: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); }
h6 { font-size: .85rem; margin-top: 1rem; font-weight: 700; color: var(--c-muted); }
p, ul, ol, dl, table { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: .3rem; }
a { color: var(--c-primary); text-underline-offset: 2px; }
a:hover { color: var(--c-primary-dark); }
:focus-visible { outline: 3px solid #e9a800; outline-offset: 2px; }
small, .muted { color: var(--c-muted); }
.num { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-ink); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}