/* Reset ringan, muat huruf, dan gaya dasar dokumen. */

/* font-display: swap -> teks langsung terbaca dengan huruf cadangan sementara
   berkas woff2 dimuat. Di aplikasi yang dibuka setiap hari, layar kosong
   selama beberapa ratus milidetik jauh lebih mengganggu daripada pergeseran
   huruf sekali di awal. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--border-strong) transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 650;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

/* Setiap elemen yang memuat nominal memakai angka tabular, supaya digit tidak
   bergeser saat nilainya berubah dan kolom rupiah tetap lurus. */
.tnum, table, .money, input[inputmode='numeric'] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Outline fokus tidak pernah dihilangkan. Cincin dalam berwarna permukaan
   menjaganya tetap terlihat di atas tombol berwarna gelap. */
:focus-visible {
  outline: 2px solid var(--primary-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: var(--sp-4);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary);
  color: var(--text-invert);
  border-radius: var(--r-md);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

::selection { background: var(--primary-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Layar pembuka sebelum aplikasi termuat, supaya tidak ada kedipan halaman
   kosong lalu tiba-tiba muncul form login. */
#boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text-faint);
  font-family: var(--font-display);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}