@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Caveat:wght@500;700&display=swap');

:root {
  --paper: #F3F5F7;
  --sheet: #FFFFFF;
  --ink: #172A46;
  --ink-2: #3A4A63;
  --mute: #5C6678;
  --line: #DCE1E8;
  --red: #C2182B;
  --red-soft: #FBE9EB;
  --green: #1D7A4F;
  --green-soft: #E4F3EB;
  --amber: #9A6400;
  --amber-soft: #FFF3D6;
  --hl: #F5DF6B;
  --blue: #2350A8;
  --blue-soft: #E8EEFA;
  --r-sm: 6px;
  --r: 10px;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --serif: 'Literata', Georgia, serif;
  --hand: 'Caveat', cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1A2B; --sheet: #16233A; --ink: #E7ECF3; --ink-2: #C3CCDA; --mute: #93A0B5; --line: #2A3A55;
    --red: #FF6B78; --red-soft: #3A1D25; --green: #5CC892; --green-soft: #173528; --amber: #F2B84B; --amber-soft: #3A2E14;
    --hl: #7C6A1C; --blue: #8DB0FF; --blue-soft: #1D2D4D;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1A2B; --sheet: #16233A; --ink: #E7ECF3; --ink-2: #C3CCDA; --mute: #93A0B5; --line: #2A3A55;
  --red: #FF6B78; --red-soft: #3A1D25; --green: #5CC892; --green-soft: #173528; --amber: #F2B84B; --amber-soft: #3A2E14;
  --hl: #7C6A1C; --blue: #8DB0FF; --blue-soft: #1D2D4D;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); }
a { color: var(--blue); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--mute); }
.small { font-size: .875rem; }

/* tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 .95rem/1 var(--sans);
  padding: .8em 1.2em; border-radius: var(--r-sm); border: 1.5px solid var(--ink); background: var(--ink); color: var(--sheet);
  text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.sm { padding: .55em .85em; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: progress; }

/* form */
label { display: block; font-weight: 600; font-size: .9rem; margin: .9em 0 .3em; }
input, textarea, select { width: 100%; font: 400 .95rem/1.4 var(--sans); padding: .7em .8em; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--sheet); color: var(--ink); }
input:focus, textarea:focus, select:focus { border-color: var(--blue); outline: none; }
textarea { min-height: 110px; resize: vertical; }
.hint { font-size: .82rem; color: var(--mute); margin-top: .3em; }

/* status audit */
.badge { display: inline-block; font: 700 .75rem/1 var(--sans); padding: .45em .65em; border-radius: 4px; white-space: nowrap; }
.b-red { background: var(--red-soft); color: var(--red); }
.b-amber { background: var(--amber-soft); color: var(--amber); }
.b-green { background: var(--green-soft); color: var(--green); }
.b-blue { background: var(--blue-soft); color: var(--blue); }
.b-grey { background: var(--line); color: var(--ink-2); }