/* ============================================================
   UNIFY COLORS v2 — satu warna kalem, konsisten di SEMUA mode
   (light / dark / sepia).
   Ditulis dengan selector yang sengaja disamakan/dilebihkan
   spesifisitasnya dibanding rule asli di style.css & *-override.css,
   supaya tidak kalah walau sama-sama pakai !important.
   ============================================================ */

:root{
  --uc-bg:      #eef2f9;
  --uc-bg-2:    #e4eaf5;
  --uc-border:  #90a4c8;
  --uc-accent:  #3b5998;
  --uc-text:    #24304a;
}

[data-theme="dark"]{
  --uc-bg:      #1c2333;
  --uc-bg-2:    #232c40;
  --uc-border:  #4a5a82;
  --uc-accent:  #9db4e8;
  --uc-text:    #dbe2f0;
}

body.sepia-mode{
  --uc-bg:      #f1e9d8;
  --uc-bg-2:    #e9dfc8;
  --uc-border:  #b8a67e;
  --uc-accent:  #5c4a2a;
  --uc-text:    #3a2f1c;
}

/* ------------------------------------------------------------
   Kotak "Arti" (grammar-intro) — base + [style] + dark + sepia
   ------------------------------------------------------------ */
.grammar-intro,
.grammar-intro[style]{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.grammar-intro strong,
.grammar-intro[style] strong{
  color: var(--uc-accent) !important;
}
[data-theme="dark"] .grammar-intro,
[data-theme="dark"] .grammar-intro[style],
body.sepia-mode .grammar-intro,
body.sepia-mode .grammar-intro[style]{
  background: var(--uc-bg) !important;
  color: var(--uc-text) !important;
}

/* ------------------------------------------------------------
   Semua .plus-box (Pola Pembentukan ungu & Makna/Penggunaan oranye)
   termasuk varian [style*="fff3e0"] yang dipakai utk kotak oranye
   ------------------------------------------------------------ */
.plus-box,
.plus-box[style],
.plus-box[style*="fff3e0"]{
  background: var(--uc-bg) !important;
  border-color: var(--uc-border) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.plus-box > strong,
.plus-box strong,
.plus-box[style*="fff3e0"] strong{
  color: var(--uc-accent) !important;
}
[data-theme="dark"] .plus-box,
[data-theme="dark"] .plus-box[style*="fff3e0"],
body.sepia-mode .plus-box,
body.sepia-mode .plus-box[style*="fff3e0"]{
  background: var(--uc-bg) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .plus-box strong,
[data-theme="dark"] .plus-box[style*="fff3e0"] strong,
body.sepia-mode .plus-box strong,
body.sepia-mode .plus-box[style*="fff3e0"] strong{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Tabel di dalam plus-box (Pola Pembentukan)
   ------------------------------------------------------------ */
.plus-box table{ border-color: var(--uc-border) !important; }
.plus-box table tr{ background: transparent !important; }
.plus-box table tr[style],
.plus-box table td[style]{
  background: var(--uc-bg-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}
.plus-box table tr:first-child td[style]{
  background: var(--uc-bg-2) !important;
  color: var(--uc-accent) !important;
}
.plus-box table td[style] strong{ color: var(--uc-accent) !important; }
.plus-box table tr:nth-child(even) td[style]{ background: var(--uc-bg-2) !important; }
[data-theme="dark"] .plus-box table tr[style],
[data-theme="dark"] .plus-box table td[style],
body.sepia-mode .plus-box table tr[style],
body.sepia-mode .plus-box table td[style]{
  background: var(--uc-bg-2) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .plus-box table tr:first-child td[style],
body.sepia-mode .plus-box table tr:first-child td[style]{
  color: var(--uc-accent) !important;
}
[data-theme="dark"] .plus-box table td[style] strong,
body.sepia-mode .plus-box table td[style] strong{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Kotak Perhatian / Catatan (warning-note)
   ------------------------------------------------------------ */
.warning-note{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.warning-note strong{ color: var(--uc-accent) !important; }
[data-theme="dark"] .warning-note,
body.sepia-mode .warning-note{
  background: var(--uc-bg) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .warning-note strong,
body.sepia-mode .warning-note strong{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Kotak contoh kalimat (example-box)
   ------------------------------------------------------------ */
.example-box{ background: var(--uc-bg) !important; }
[data-theme="dark"] .example-box,
body.sepia-mode .example-box{ background: var(--uc-bg) !important; }

/* ------------------------------------------------------------
   meaning-row / meaning-word
   ------------------------------------------------------------ */
.meaning-word{ color: var(--uc-accent) !important; }
[data-theme="dark"] .meaning-word,
body.sepia-mode .meaning-word{ color: var(--uc-accent) !important; }

/* ------------------------------------------------------------
   tip-box & nuance-box
   ------------------------------------------------------------ */
.tip-box, .nuance-box{ color: var(--uc-text) !important; }
.tip-icon{ color: var(--uc-accent) !important; }

/* ------------------------------------------------------------
   Highlight kata kunci di kalimat contoh — satu warna, semua mode
   ------------------------------------------------------------ */
.example-jp .highlight,
.dialogue .highlight,
.highlight{
  background: none !important;
  color: var(--uc-accent) !important;
  text-decoration-color: var(--uc-accent) !important;
}
.highlight ruby,
.highlight ruby rt{ color: var(--uc-accent) !important; }
[data-theme="dark"] .highlight,
body.sepia-mode .highlight{
  background: none !important;
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Chapter banner / cover (hero besar di atas tiap bab)
   Warna solid gelap sendiri (bukan --uc-accent) supaya teks putih
   tetap kontras di semua mode.
   ------------------------------------------------------------ */
.chapter-banner{
  background: #3b5998 !important;
  color: #fff !important;
}
[data-theme="dark"] .chapter-banner{ background: #24304a !important; }
body.sepia-mode .chapter-banner{ background: #5c4a2a !important; }
.book-header{ background: #3b5998 !important; color: #fff !important; }
[data-theme="dark"] .book-header{ background: #24304a !important; }
body.sepia-mode .book-header{ background: #5c4a2a !important; }

/* ------------------------------------------------------------
   Section header (kotak judul di atas tiap section)
   termasuk varian [data-sc="1..5"] dan mode dark/sepia
   ------------------------------------------------------------ */
.section-header,
.section-header[data-sc="1"],
.section-header[data-sc="2"],
.section-header[data-sc="3"],
.section-header[data-sc="4"],
.section-header[data-sc="5"]{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.section-header .sec-num-badge,
.section-header .sec-label,
.section-header[data-sc="1"] .sec-num-badge,
.section-header[data-sc="2"] .sec-num-badge,
.section-header[data-sc="3"] .sec-num-badge,
.section-header[data-sc="4"] .sec-num-badge,
.section-header[data-sc="5"] .sec-num-badge,
.section-header[data-sc="1"] .sec-label,
.section-header[data-sc="2"] .sec-label,
.section-header[data-sc="3"] .sec-label,
.section-header[data-sc="4"] .sec-label,
.section-header[data-sc="5"] .sec-label{
  background: var(--uc-accent) !important;
  color: #fff !important;
}
.section-header .sec-kanji,
.section-header:not(:has(.sec-num-badge)),
.section-header[data-sc="1"] .sec-kanji,
.section-header[data-sc="2"] .sec-kanji,
.section-header[data-sc="3"] .sec-kanji,
.section-header[data-sc="4"] .sec-kanji,
.section-header[data-sc="5"] .sec-kanji{
  color: var(--uc-accent) !important;
}
.section-header .sec-meaning{ color: var(--uc-text) !important; }
.section-header.tone-purple-bg{
  background: var(--uc-accent) !important;
  border-left-color: var(--uc-accent) !important;
  color: #fff !important;
}

[data-theme="dark"] .section-header,
[data-theme="dark"] .section-header[data-sc],
body.sepia-mode .section-header,
body.sepia-mode .section-header[data-sc]{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .section-header .sec-num-badge,
[data-theme="dark"] .section-header .sec-label,
[data-theme="dark"] .section-header[data-sc] .sec-num-badge,
[data-theme="dark"] .section-header[data-sc] .sec-label,
body.sepia-mode .section-header .sec-num-badge,
body.sepia-mode .section-header .sec-label,
body.sepia-mode .section-header[data-sc] .sec-num-badge,
body.sepia-mode .section-header[data-sc] .sec-label{
  background: var(--uc-accent) !important;
  color: #fff !important;
}
[data-theme="dark"] .section-header .sec-kanji,
[data-theme="dark"] .section-header[data-sc] .sec-kanji,
body.sepia-mode .section-header .sec-kanji,
body.sepia-mode .section-header[data-sc] .sec-kanji{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   toc-row[data-sc] (daftar isi bab) — ikut disamakan biar konsisten
   ------------------------------------------------------------ */
.toc-row[data-sc] .toc-num,
[data-theme="dark"] .toc-row[data-sc] .toc-num,
body.sepia-mode .toc-row[data-sc] .toc-num{
  background: var(--uc-accent) !important;
}
.toc-row[data-sc] .toc-kanji,
[data-theme="dark"] .toc-row[data-sc] .toc-kanji,
body.sepia-mode .toc-row[data-sc] .toc-kanji{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Judul kata Jepang (.word-jp) & badge kelas kata (.pos-badge)
   — sebelumnya ikut warna tema per-level (hijau utk N2, pink utk N3, dst
   via var(--pink)/--n2-primary). Disamakan ke aksen biru-abu yang sama.
   ------------------------------------------------------------ */
.word-jp{ color: var(--uc-accent) !important; }
.word-jp.tone-purple,
.word-jp.tone-blue,
.card-num.tone-purple,
.card-num.tone-blue{ color: var(--uc-accent) !important; }
.pos-badge{ background: var(--uc-accent) !important; }
.pos-badge.kanyouku,
.pos-badge.verb, .pos-badge.adj, .pos-badge.adv,
.pos-badge.na-adj, .pos-badge.idiom{ background: var(--uc-accent) !important; }
.card-num{ color: var(--uc-accent) !important; }
.toc-num{ background: var(--uc-accent) !important; }
.toc-kanji{ color: var(--uc-accent) !important; }
[data-theme="dark"] .word-jp,
body.sepia-mode .word-jp,
[data-theme="dark"] .pos-badge,
body.sepia-mode .pos-badge,
[data-theme="dark"] .card-num,
body.sepia-mode .card-num,
[data-theme="dark"] .toc-num,
body.sepia-mode .toc-num,
[data-theme="dark"] .toc-kanji,
body.sepia-mode .toc-kanji{
  color: var(--uc-accent) !important;
}
[data-theme="dark"] .pos-badge,
body.sepia-mode .pos-badge,
[data-theme="dark"] .toc-num,
body.sepia-mode .toc-num{
  background: var(--uc-accent) !important;
  color: #fff !important;
}

/* ============================================================
   KENYAMANAN BACA — spacing, furigana, & pemisahan tipografi
   (tidak mengubah ukuran font dasar agar slider S/M/L/XL user
   tetap berfungsi normal; hanya menambah jarak & line-height)
   ============================================================ */

/* Jarak antar kotak (plus-box, warning-note, example-box) —
   dari 7px jadi ~14px supaya mata dapat "napas" antar blok */
.plus-box{ margin-top: 14px !important; }
.warning-note{ margin-top: 14px !important; }
.example-box{ margin-top: 12px !important; margin-bottom: 4px !important; }
.plus-box + .plus-box{ margin-top: 16px !important; }

/* Jarak antar word-card (satu blok kosakata/pola) sedikit dilonggarkan */
.word-card{ padding-bottom: 4px !important; }
.card-body{ padding: 14px 16px 12px !important; }

/* Baris yang mengandung furigana (ruby) — tambah sedikit line-height
   supaya rt (huruf kecil di atas kanji) tidak terlalu mepet ke baris
   sebelumnya, terutama di kalimat contoh yang lebih panjang */
.example-jp, .dialogue{
  line-height: 2 !important;
  padding-top: 2px;
}
.word-jp{
  line-height: 1.5 !important;
  padding-top: 4px;
}
ruby{ margin: 0 1px; }
rt{ line-height: 1.4; }

/* Pemisahan gaya tipografi: teks Jepang tetap serif, teks Indonesia
   dipastikan sans-serif supaya mata langsung tahu sedang baca bagian mana */
.example-id, .dialogue-id, .word-id-ind,
.plus-box, .warning-note, .grammar-intro,
.meaning-row{
  font-family: 'Inter', 'Nunito', system-ui, sans-serif !important;
}
[lang="ja"], .example-jp, .dialogue, .word-jp, .meaning-word{
  font-family: var(--jp-font, 'Noto Serif JP'), 'Yu Mincho', serif !important;
}

/* Target area tombol tema (matahari/bulan) & tombol lain di nav —
   perbesar area tap minimal 44x44px tanpa mengubah ukuran ikon visual */
.theme-toggle{
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hormati preferensi "reduce motion" perangkat: matikan transisi
   warna/scroll yang tidak esensial bagi yang sensitif terhadap gerakan */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}