/* Token warna dan tipografi bersama (halaman siswa dan panel admin).
   Konsep: tepi sungai pada pagi hari. Hijau tinta sungai, teal air, dan emas matahari terbit. */
:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --bg: #e9efed;
  --surface: #ffffff;
  --surface-2: #f2f6f5;
  --ink: #0b2629;
  --ink-2: #3d5457;
  --muted: #5d7276;
  --line: #d2ddda;

  --river: #0e6f6c;
  --river-2: #0a5558;
  --on-river: #ffffff;
  --sun: #f2b33d;
  --side: #0a2a2d;
  --side-ink: #e8f3f1;

  --ok: #157a4e;
  --ok-tint: #dcf1e5;
  --bad: #a93434;
  --bad-tint: #f8e2df;
  --warn: #8a5f00;
  --warn-tint: #fbefd0;
  --focus: #0e6f6c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #061a1c;
    --surface: #0d2a2d;
    --surface-2: #113338;
    --ink: #e6f2f0;
    --ink-2: #b5ccc9;
    --muted: #8aa5a2;
    --line: #20474b;
    --river: #55c6c0;
    --river-2: #86dbd6;
    --on-river: #04201f;
    --side: #05191b;
    --ok: #5fd39a;
    --ok-tint: #11392b;
    --bad: #ff9a91;
    --bad-tint: #3c1c1d;
    --warn: #f2b33d;
    --warn-tint: #352a0d;
    --focus: #86dbd6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #061a1c;
  --surface: #0d2a2d;
  --surface-2: #113338;
  --ink: #e6f2f0;
  --ink-2: #b5ccc9;
  --muted: #8aa5a2;
  --line: #20474b;
  --river: #55c6c0;
  --river-2: #86dbd6;
  --on-river: #04201f;
  --side: #05191b;
  --ok: #5fd39a;
  --ok-tint: #11392b;
  --bad: #ff9a91;
  --bad-tint: #3c1c1d;
  --warn: #f2b33d;
  --warn-tint: #352a0d;
  --focus: #86dbd6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
.ikon { flex: none; }

.river { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

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