/* ============================================================
   QUEEN LAUNDRY · dunia visual "Buku Nota"
   Tokens, reset, tipografi, dan permukaan bawaan browser.
   ============================================================ */

@font-face {
  font-family: 'Libre Franklin';
  src: url('../font/libre-franklin-var.woff2') format('woff2-variations'),
       url('../font/libre-franklin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../font/courier-prime-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../font/courier-prime-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Lembar kertas. Warna lembar = posisi fisik bungkusan. --- */
  --bond: #FAF9F5;            /* bond putih  · masih di meja depan */
  --bond-sunk: #F1EFE7;       /* bond tertekan · kepala tabel, sumur isian */
  --duplicate: #F4CCD4;       /* rangkap merah muda · sedang diproses di belakang */
  --duplicate-sunk: #EDBAC5;
  --triplicate: #F7E3A8;      /* rangkap kuning · sudah di rak, siap diambil */
  --triplicate-sunk: #F2D98E;

  /* --- Tinta --- */
  --ink: #241C33;             /* karbon, hitam kebiruan-ungu */
  --ink-soft: #575064;        /* keterangan  (6,2:1 di atas bond) */
  --ink-mute: #6E6879;        /* isian kosong (4,9:1 di atas bond) */
  --ink-on-duplicate: #3A1F2A;
  --ink-on-triplicate: #33280B;

  /* --- Merah mesin penomor. SATU pekerjaan saja: nomor nota.
         Jangan dipakai untuk keterlambatan, peringatan, atau apapun
         yang lain; begitu dipinjam, nomor nota berhenti menonjol. --- */
  --sequence: #C21C24;
  --sequence-deep: #8E1319;
  --margin-rule: #DE8A86;     /* garis tepi merah, seperti buku tulis */

  /* --- Tinta stempel karet. Semua peringatan dan keterlambatan
         memakai keluarga ini, bukan merah mesin penomor. --- */
  --stamp: #4B3A8F;
  --stamp-warn: #A81E28;
  --stamp-warn-deep: #7E1620;
  --stamp-warn-field: #F6E1E2;        /* bidang telat, 8,34:1 dengan tinta di atas */
  --stamp-warn-field-hover: #EFD1D3;
  --stamp-ok: #1F5D3A;


  /* --- Garis. Selalu mendarat pas di piksel perangkat. --- */
  --hair: 1px;
  --rule: #CBC5BB;
  --rule-soft: #E0DBD2;
  --rule-strong: #877F74;

  /* --- Satu satuan grid keras. Tidak ada jarak yang ditentukan pakai perasaan. --- */
  --u: 4px;
  --u2: 8px;
  --u3: 12px;
  --u4: 16px;
  --u5: 20px;
  --u6: 24px;
  --u8: 32px;
  --u10: 40px;
  --u12: 48px;
  --u16: 64px;

  /* --- Huruf. Dua muka, dibagi menurut arti. --- */
  --face-print: 'Libre Franklin', system-ui, sans-serif;  /* yang tercetak di pad */
  --face-fill: 'Courier Prime', ui-monospace, monospace;  /* yang diisi belakangan */

  --t-micro: 11px;
  --t-small: 13px;
  --t-base: 15px;
  --t-mid: 18px;
  --t-large: 22px;
  --t-xl: 30px;

  --track-plate: 0.09em;   /* huruf besar tercetak */
  --track-tight: -0.012em;

  --rail: 156px;
  --focus: var(--stamp);

  /* Permukaan pekat: tombol utama dan pilihan terpilih. Memakai tinta
     sebagai alas, jadi ikut terbalik sendiri waktu mode gelap. */
  --solid-hover: #100B1C;
  --solid-active: #000000;
  --on-solid-soft: #C9C2D6;
  --backdrop: rgba(36, 28, 51, 0.45);

  /* Peringatan di atas permukaan pekat. Merah stempel di atas karbon cuma
     2,24:1; warna ini 8,07:1 di atas ground yang sama. */
  --warn-on-ink: #FF9A93;

  color-scheme: light;
}

/* ============================================================
   MODE GELAP · buku nota yang sama, dilihat di bawah lampu redup.
   Toko menerima cucian sampai jam 10 malam, dan tablet menyala
   putih penuh di ruangan gelap itu menyakitkan mata.

   Ini terjemahan, bukan pembalikan buta: karbon yang tadinya tinta
   sekarang jadi alas, kertas yang tadinya alas sekarang jadi tinta,
   dan tiap warna lembar TETAP memegang arti posisinya. Merah muda
   tetap berarti sedang diproses di belakang, kuning tetap berarti
   sudah di rak.

   `theme-boot.js` yang memutuskan nilainya, jadi blok ini cuma perlu
   ada SEKALI. Jangan menambah blok kedua untuk prefers-color-scheme.
   ============================================================ */

:root[data-theme="gelap"] {
  --bond: #17131E;
  --bond-sunk: #211B2B;

  --duplicate: #3D2029;
  --duplicate-sunk: #4A2833;
  --triplicate: #3B3114;
  --triplicate-sunk: #4A3D19;

  --ink: #EFEBE3;
  --ink-soft: #B3ABBF;
  --ink-mute: #948CA3;
  --ink-on-duplicate: #F6D9DE;
  --ink-on-triplicate: #F6E6B4;

  --sequence: #FF6B62;
  --sequence-deep: #FF8F86;
  --margin-rule: #7A3A3A;

  --stamp: #A48BF0;
  --stamp-warn: #FF7A73;
  --stamp-warn-deep: #FFA9A3;
  --stamp-warn-field: #3A1E22;
  --stamp-warn-field-hover: #46262A;
  --stamp-ok: #62C48D;

  --rule: #3B3348;
  --rule-soft: #2C2637;
  --rule-strong: #574E68;

  /* Permukaan pekat sekarang terang, jadi arah hover ikut dibalik. */
  --solid-hover: #FFFFFF;
  --solid-active: #D8D2C6;
  --on-solid-soft: #4A4359;

  /* Di atas permukaan terang itu, peringatan harus gelap lagi. */
  --warn-on-ink: #9B1B24;

  --backdrop: rgba(6, 4, 10, 0.62);

  color-scheme: dark;
}

@media (min-resolution: 2dppx) {
  :root { --hair: 0.5px; }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* color-scheme dipegang token di :root supaya ikut mode gelap. */
}

body {
  margin: 0;
  background: var(--bond);
  color: var(--ink);
  font-family: var(--face-print);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Permukaan bawaan browser, dijahit ke dunia ini ---------- */

::selection {
  background: var(--stamp);
  color: var(--bond);
}

input, textarea, select { caret-color: var(--stamp); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 3px solid var(--bond);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }

/* Angka selalu berjajar lurus ke bawah di kolom manapun. */
.num, td.num, th.num, input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--face-fill);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

/* Plat tercetak: nama harfiah tiap zona dan tiap kontrol. */
.plate {
  font-family: var(--face-print);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plate--boxed {
  display: inline-block;
  padding: var(--u) var(--u2);
  border: var(--hair) solid var(--rule-strong);
  color: var(--ink);
  background: var(--bond);
}

/* Pangkat dibawa tebal, huruf besar, dan garis. Bukan ukuran yang digedein. */
.head {
  font-family: var(--face-print);
  font-size: var(--t-mid);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.fill {
  font-family: var(--face-fill);
  font-variant-numeric: tabular-nums;
}

.rule-under { border-bottom: var(--hair) solid var(--rule); }

/* Garis ganda di atas tiap total, seperti formulir cetak. */
.rule-double {
  border-top: var(--hair) solid var(--ink);
  box-shadow: 0 3px 0 -2px var(--ink);
}

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

/* ---------- Gerak: fisika kertas saja ---------- */

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