/*
 * KULIT ARSTEMA untuk aplikasi alat: /wiring/, /kamus/, /3d/
 * ==========================================================
 *
 * Aplikasi-aplikasi ini dibangun di repo `alat-teknis` dan dulu memakai palet
 * Takar: dasar hitam dengan jingga. Di arstema.com mereka terasa seperti tamu
 * dari situs lain. Berkas ini memakaikan wajah ARSTEMA kepada mereka: dasar
 * hijau hutan, tinta kertas, satu sinyal amber, dan huruf IBM Plex.
 *
 * ATURAN BERKAS INI — KOSMETIK SAJA.
 * Yang boleh diubah hanya NILAI token warna dan huruf yang sudah disediakan
 * aplikasinya sendiri (`:root { --bg, --surface, --key, --text, --accent … }`),
 * ditambah beberapa sentuhan yang tidak memindahkan apa pun: warna sorotan
 * teks, warna batang gulir, dan cincin fokus.
 *
 * Ada dua palet: gelap (bawaan di :root) dan terang (:root[data-theme="light"],
 * 5 Okt 2026), keduanya dari token tema situs.
 *
 * DILARANG di berkas ini: mengubah tata letak, ukuran, jarak, posisi, atau
 * menyembunyikan elemen; menyentuh kanvas papan rangkaian dan penampil 3D;
 * menimpa kelas milik aplikasi. Satu baris `display:none` saja sudah bisa
 * menghilangkan tombol yang dibutuhkan teknisi di lapangan.
 *
 * Dipasang oleh scripts/sisipkan-jalan-pulang.mjs sebagai <link> di <head>,
 * SESUDAH stylesheet aplikasi, jadi nilai di sini yang dipakai.
 * Dokumentasi: docs/perubahan/2026-09-18-kulit-arstema-alat.md
 */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/kulit/plex-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/kulit/plex-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/kulit/plex-mono-500.woff2') format('woff2');
}

:root {
  /* Dasar: hijau hutan arstema.com, bukan hitam Takar. */
  --bg: #061d19;
  --surface: #0b2a24;
  --key: #10352e;
  --key-active: #17463c;
  --border: #1d4a40;

  /* Tinta kertas dan keterangan yang lebih tenang. */
  --text: #f2efe7;
  --muted: #a9b8b2;
  --placeholder: #708a82;

  /* Satu sinyal: amber ARSTEMA, sama dengan sudut logo dan garis ukur. */
  --accent: #f0a73d;
  --on-accent: #231405;
  --field-tint: rgba(240, 167, 61, 0.05);

  --scrim: rgba(6, 29, 25, 0.62);

  --app-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * TEMA TERANG — kertas ARSTEMA (pemilik, 5 Okt 2026: "Dictionary aksen tema
 * hijau full bikin mata sakit, tidak ada tema putih"). Nilai sama dengan
 * src/theme/theme.light.css di situs. Aplikasi sudah punya
 * :root[data-theme="light"]; aturan ini menang karena dimuat sesudahnya.
 * Tema dipilih lewat tombol situs atau tombol di header alat; pulang.js
 * menyelaraskan keduanya. Tetap hanya NILAI warna.
 */
:root:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2efe7;
  --surface: #f7f4ed;
  --key: #e9e3d7;
  --key-active: #dfd8ca;
  --border: #cbc3b3;
  --text: #0b1815;
  --muted: #4f5b57;
  --placeholder: #8b928b;
  --accent: #8f4d09;
  --on-accent: #fbfaf6;
  --field-tint: rgba(143, 77, 9, 0.05);
  --scrim: rgba(11, 24, 21, 0.35);
}

html[data-theme="light"] .tool-room.da-room {
  --da-surface: #f7f4ed;
  --da-raised: #e9e3d7;
  --da-line: #cbc3b3;
  --da-ink: #0b1815;
  --da-muted: #4f5b57;
  --da-accent: #8f4d09;
}

html[data-theme="light"] .da-room .da-stage {
  background: #e9e3d7;
}

html[data-theme="light"] .arstema-wiring {
  --bg: #f2efe7;
  --surface: #f7f4ed;
  --key: #e9e3d7;
  --border: #cbc3b3;
  --text: #0b1815;
  --muted: #4f5b57;
  --accent: #8f4d09;
  --on-accent: #fbfaf6;
}

/*
 * Anatomi 3D memakai set tokennya sendiri di dalam .da-room. Sama seperti di
 * atas: hanya NILAI-nya yang diganti, nama tokennya milik aplikasi.
 */
/* `html` di depan hanya untuk memenangkan urutan: berkas CSS aplikasi 3D
   dimuat belakangan karena diimpor saat dibutuhkan. Tetap nilai warna saja. */
html .tool-room.da-room {
  --da-surface: #0b2a24;
  --da-raised: #10352e;
  --da-line: #1d4a40;
  --da-ink: #f2efe7;
  --da-muted: #a9b8b2;
  --da-accent: #f0a73d;
}

/*
 * Panggung 3D: warnanya saja yang diganti dari abu batu tua ke hijau hutan
 * yang lebih gelap dari panelnya, supaya mesinnya tetap menonjol. Ukuran dan
 * posisi panggung tidak disentuh, dan kanvas 3D di atasnya tetap milik aplikasi:
 * warna latar render diatur oleh mesin 3D-nya, bukan CSS, jadi tidak disentuh.
 */
html .da-room .da-stage {
  background: #08231e;
}

/*
 * Wiring versi baru (paket @arstema/wiring) membawa palet cadangannya sendiri
 * di `.arstema-wiring` dan menjembatani seluruh token `--as-*` ke sana. Jadi
 * cukup nilai palet itu yang diganti — satu blok, tanpa menyentuh satu pun
 * kelas papan, grid, atau kanvasnya.
 */
html .arstema-wiring {
  --bg: #061d19;
  --surface: #0b2a24;
  --key: #10352e;
  --border: #1d4a40;
  --text: #f2efe7;
  --muted: #a9b8b2;
  --accent: #f0a73d;
  --on-accent: #231405;
  --app-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Daftar pilihan <select>. Peramban menggambar popup-nya sendiri dan mengambil
 * warnanya dari latar select; kalau latarnya tembus pandang, Windows memakai
 * putih — dan teks kertas kita hilang di atasnya. Jadi warnanya dinyatakan
 * tegas di sini. Warna saja: ukuran, posisi, dan isi daftarnya tidak disentuh.
 */
html select {
  background-color: var(--surface);
  color: var(--text);
}

html option,
html optgroup {
  background-color: var(--surface);
  color: var(--text);
}

option:disabled {
  color: var(--muted);
}

option:checked,
option:hover {
  background-color: var(--key-active);
  color: var(--text);
}

/* Sorotan teks memakai warna rumah, bukan biru bawaan peramban. */
::selection {
  color: var(--on-accent);
  background: var(--accent);
}

/* Batang gulir mengikuti dasar hijau; tidak mengubah ruang yang tersedia. */
* {
  scrollbar-color: var(--border) transparent;
}

/* Cincin fokus tetap jelas di atas hijau — penting untuk pemakaian keyboard. */
:focus-visible {
  outline-color: var(--accent);
}