/* ============================================================
   DESIGN SYSTEM — History of Redemption · Abraham Park
   Versi 2.0

   CARA PAKAI DI SETIAP HALAMAN:
   <link rel="stylesheet" href="../design-system.css">
   <link rel="stylesheet" href="../book-css/book-N.css">

   STRUKTUR TOKEN:
   1. Typography (font family, size, weight, line-height, spacing)
   2. Theme Colors (accent per buku — di-override di book-N.css)
   3. Neutral Colors (tetap di semua buku)
   4. Semantic Colors (status: error, warning, success)
   5. Data Colors (entitas konten: silsilah, periode, kategori)
   6. Surface Colors (dark UI / overlay)
   7. Shape, Shadow, Space, Motion, Z-Index, Layout
   8. Base Reset & Component Styles

   ATURAN:
   - JANGAN ketik hex atau rgb langsung di style="" atau <style>
   - Semua nilai harus mengacu ke var(--token)
   - Pengecualian yang diizinkan:
       · Atribut SVG fill/font-family (tidak mendukung var())
       · rgba(0,0,0,.015) untuk zebra stripe tabel (terlalu kecil jadi token)
       · clamp() untuk font-size responsif pada heading besar
   ============================================================ */


/* ============================================================
   LOAD FONTS — salin ke <head> setiap halaman HTML:

   <link href="https://fonts.googleapis.com/css2?
     family=Nunito+Sans:ital,opsz,wght@
       0,6..12,300;0,6..12,400;0,6..12,500;
       0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400
     &family=Crimson+Pro:ital,wght@
       0,300;0,400;0,600;0,700;1,300;1,400;1,600
     &family=JetBrains+Mono:wght@400;500;700
     &display=swap" rel="stylesheet">

   MENGGANTI FONT? Cukup ubah tiga baris di bawah:
   --font-body, --font-display, --font-mono
   Semua halaman langsung ikut.
   ============================================================ */


:root {

  /* ==========================================================
     1. TYPOGRAPHY
     ========================================================== */

  /* — Font families — */
  --font-body:     'Nunito Sans', -apple-system, sans-serif;
  --font-display:  'Crimson Pro', Georgia, serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* — Font sizes —
     Skala diperluas agar tidak ada nilai literal yang perlu ditulis.
     Urutan: tiny → xs → sm → base → md → lg → xl
  */
  --fs-tiny:   9px;             /* label super kecil, badge SVG    */
  --fs-xs:     10px;            /* label mono uppercase             */
  --fs-label:  11px;            /* label kecil, nav brand           */
  --fs-sm:     12px;            /* caption, desc, badge             */
  --fs-body:   13px;            /* body compact (card, list)        */
  --fs-base:   16px;            /* body paragraf utama              */
  --fs-md:     17px;            /* hero desc, lead                  */

  /* Responsive — gunakan di heading besar saja */
  --fs-lg:     clamp(1.1rem, 3vw, 1.4rem);    /* card title        */
  --fs-xl:     clamp(2rem, 6vw, 3.6rem);       /* hero title        */

  /* — Font weights — */
  --fw-light:   300;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* — Line heights — */
  --lh-tight:   1.1;     /* hero title besar                       */
  --lh-snug:    1.3;     /* card title                             */
  --lh-body:    1.65;    /* body paragraf                          */
  --lh-loose:   1.8;     /* reading text, ayat                     */

  /* — Letter spacings — */
  --ls-mono:    0.2em;   /* label mono uppercase                   */
  --ls-wide:    0.3em;   /* very spaced labels                     */
  --ls-tight:  -0.5px;   /* large display heading                  */


  /* ==========================================================
     2. THEME COLORS — ACCENT
     Di-override per buku via book-N.css.
     Default = Buku 1 Teal.

     MENGGANTI WARNA AKSEN SATU BUKU?
     Buka book-N.css → ubah 4 baris --accent/*.
     Semua komponen langsung ikut.
     ========================================================== */

  --accent:        #17a79d;
  --accent-dark:   #0f8078;
  --accent-dim:    rgba(23,167,157,.09);
  --accent-b:      rgba(23,167,157,.25);

  /* Aksen kedua — tetap di semua buku */
  --accent2:       #2bb673;
  --accent2-dark:  #1f9058;
  --accent2-dim:   rgba(43,182,115,.08);
  --accent2-mid:   rgba(43,182,115,.25);   /* untuk border/divider */


  /* ==========================================================
     3. NEUTRAL COLORS — tetap di semua buku
     ========================================================== */

  --ink:         #1a1a1b;    /* primary text                       */
  --ink2:        #3a3b3c;    /* secondary text                     */
  --grey:        #6d6e70;    /* muted text, labels                 */
  --grey-light:  #a0a1a3;    /* very muted                         */
  --grey-dim:    rgba(109,110,112,.08);

  --white:       #ffffff;
  --bg:          #f4f7f7;    /* page background                    */
  --bg2:         #e8e9ea;    /* dividers, card borders             */


  /* ==========================================================
     4. SEMANTIC COLORS — status & kondisi sistem
     Warna ini bermakna: merah = masalah, hijau = oke, dll.
     Jangan pakai untuk dekorasi.
     ========================================================== */

  --error:       #991b1b;
  --error-dim:   rgba(153,27,27,.08);
  --error-b:     rgba(153,27,27,.25);

  --danger:      #d94040;    /* versi lebih terang dari error      */
  --danger-dim:  rgba(217,64,64,.08);

  --warning:     #ca8a04;
  --warning-dim: rgba(202,138,4,.08);
  --warning-b:   rgba(202,138,4,.25);

  --success:     #16a34a;
  --success-dim: rgba(22,163,74,.08);
  --success-b:   rgba(22,163,74,.25);


  /* ==========================================================
     5. DATA COLORS — warna entitas konten
     Ini BUKAN theme, BUKAN status. Ini warna yang mewakili
     identitas entitas dalam data: silsilah, periode, kategori.

     Skala per warna: base · dim (bg) · mid (border) · dark (text)
     Konvensi penamaan:
       --col-[nama]-base  → warna penuh (untuk dot, swatch)
       --col-[nama]-dim   → latar sangat transparan (background)
       --col-[nama]-mid   → transparan sedang (border, divider)
       --col-[nama]-dark  → lebih gelap (teks di atas putih)

     MENAMBAH WARNA DATA BARU?
     Tambahkan satu blok di sini. Jangan tulis rgba() langsung
     di file HTML.
     ========================================================== */

  /* Silsilah — ibu-ibu Yakub (dipakai di reading-companion, dua-belas-anak-yakub) */
  --col-leah:       #b06060;
  --col-leah-dim:   rgba(176,96,96,.07);
  --col-leah-mid:   rgba(176,96,96,.25);
  --col-leah-dark:  #7a3030;

  --col-rachel:     #4a7ab0;
  --col-rachel-dim: rgba(74,122,176,.07);
  --col-rachel-mid: rgba(74,122,176,.25);
  --col-rachel-dark:#2a5a90;

  --col-bilhah:     #4a9a5a;
  --col-bilhah-dim: rgba(74,154,90,.07);
  --col-bilhah-mid: rgba(74,154,90,.25);
  --col-bilhah-dark:#2a7a3a;

  --col-zilpah:     #9a7040;
  --col-zilpah-dim: rgba(154,112,64,.07);
  --col-zilpah-mid: rgba(154,112,64,.25);
  --col-zilpah-dark:#7a5020;

  /* Periode / era (dipakai di 692-tahun, reading-companion) */
  --col-amber:      #C9A84C;
  --col-amber-dim:  rgba(201,168,76,.07);
  --col-amber-mid:  rgba(201,168,76,.25);
  --col-amber-dark: #8a6a10;

  --col-rust:       #a03f06;
  --col-rust-dim:   rgba(160,63,6,.07);
  --col-rust-mid:   rgba(160,63,6,.25);
  --col-rust-dark:  #7a2e00;

  --col-wine:       #5a1e2e;
  --col-wine-dim:   rgba(90,30,46,.07);
  --col-wine-mid:   rgba(90,30,46,.25);
  --col-wine-dark:  #3a0e1a;

  --col-steelblue:  #5a7ea8;
  --col-steelblue-dim: rgba(90,126,168,.07);
  --col-steelblue-mid: rgba(90,126,168,.25);

  --col-purple:     #7a5a9a;
  --col-purple-dim: rgba(122,90,154,.07);
  --col-purple-mid: rgba(122,90,154,.25);

  --col-sage:       #7a9e6a;
  --col-sage-dim:   rgba(122,158,106,.07);
  --col-sage-mid:   rgba(122,158,106,.25);

  /* Kategori UI tambahan */
  --col-violet:     #8c64c8;
  --col-violet-dim: rgba(140,100,200,.07);
  --col-violet-mid: rgba(140,100,200,.22);


  /* ==========================================================
     6. SURFACE COLORS — dark UI, overlay, transparansi putih
     Dipakai di komponen dengan latar gelap (timekeeper, hero dark,
     peta malam, overlay modal).
     ========================================================== */

  --overlay:         rgba(0,0,0,.5);      /* modal backdrop        */
  --overlay-light:   rgba(0,0,0,.3);      /* tooltip, hover        */
  --overlay-subtle:  rgba(0,0,0,.08);     /* zebra, hover ringan   */

  /* Teks & elemen di atas latar gelap */
  --on-dark:         rgba(255,255,255,.9);
  --on-dark-mid:     rgba(255,255,255,.6);
  --on-dark-dim:     rgba(255,255,255,.3);
  --on-dark-faint:   rgba(255,255,255,.12);

  /* Dark background surfaces */
  --surface-dark:    #1a1e1d;
  --surface-darker:  #0f1312;

  /* — Glass tokens — transparansi putih bertingkat
     Dipakai di elemen di atas latar gelap (var(--ink)):
     header button, timer widget, stats bar border, session item.
     Nama: --glass-[opacity×100]
     Konvensi: gunakan nilai terdekat, jangan tulis rgba() langsung. */
  --glass-4:   rgba(255,255,255,.04);
  --glass-5:   rgba(255,255,255,.05);
  --glass-6:   rgba(255,255,255,.06);
  --glass-7:   rgba(255,255,255,.07);
  --glass-8:   rgba(255,255,255,.08);
  --glass-10:  rgba(255,255,255,.10);
  --glass-12:  rgba(255,255,255,.12);
  --glass-14:  rgba(255,255,255,.14);
  --glass-20:  rgba(255,255,255,.20);
  --glass-25:  rgba(255,255,255,.25);
  --glass-30:  rgba(255,255,255,.30);
  --glass-35:  rgba(255,255,255,.35);
  --glass-38:  rgba(255,255,255,.38);
  --glass-45:  rgba(255,255,255,.45);
  --glass-50:  rgba(255,255,255,.50);
  --glass-75:  rgba(255,255,255,.75);
  --glass-80:  rgba(255,255,255,.80);


  /* ==========================================================
     7. SHAPE, SHADOW, SPACING
     ========================================================== */

  /* — Radius — */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* — Shadows — */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.08);

  /* — Spacing — */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* — Transitions — */
  --transition:       .2s ease;
  --transition-slow:  .4s ease;
  --transition-fast:  .15s ease;

  /* — Z-Index — */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* — Layout — */
  --nav-h:         52px;
  --content-w:     600px;
  --content-wide:  720px;
}


/* ============================================================
   8. BASE RESET
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: var(--lh-body);
}

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

button        { font-family: var(--font-body); cursor: pointer; }
input,
select,
textarea      { font-family: var(--font-body); }
a             { color: inherit; text-decoration: none; }
svg           { max-width: 100%; height: auto; }


/* ============================================================
   9. NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--bg2);
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
  gap: 10px;
}

.nav-logo     { height: 28px; width: auto; flex-shrink: 0; }

.nav-divider  { width: 1px; height: 24px; background: var(--bg2); flex-shrink: 0; }

.nav-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: .3px;
  white-space: nowrap;
}

.nav-sub {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--grey-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.nav-back {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--grey);
  background: var(--bg);
  border: 1px solid var(--bg2);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-back:hover { border-color: var(--accent-b); color: var(--accent); }

@media (min-width: 580px) { .nav-sub { display: block; } }


/* ============================================================
   10. PAGE HEADER
   ============================================================ */
.page-header {
  background: var(--white);
  border-bottom: 1px solid var(--bg2);
  padding: calc(var(--nav-h) + 24px) 20px 24px;
  text-align: center;
}

.page-header::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  margin-bottom: 28px;
}

.page-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: var(--fw-semi);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: 8px;
}
.page-title span { color: var(--accent); }

.page-sub {
  font-size: 14px;
  color: var(--grey);
  line-height: var(--lh-body);
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 580px) {
  .page-header { padding: calc(var(--nav-h) + 32px) 24px 32px; }
}


/* ============================================================
   11. SECTION LABEL
   ============================================================ */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg2);
  margin-bottom: 20px;
  text-align: center;
}


/* ============================================================
   12. CARDS
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--bg2);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover {
  border-color: var(--accent-b);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mini-card {
  background: var(--white);
  border: 1px solid var(--bg2);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: block;
  color: inherit;
  transition: all var(--transition);
  cursor: pointer;
}
.mini-card:hover {
  border-color: var(--accent-b);
  box-shadow: 0 2px 12px var(--accent-dim);
  transform: translateY(-1px);
}

.mini-icon { font-size: 20px; margin-bottom: 8px; }
.mini-name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 3px; line-height: 1.3; }
.mini-desc { font-size: var(--fs-sm); color: var(--grey); line-height: 1.5; }

.card-accent {
  background: var(--accent-dim);
  border: 1.5px solid var(--accent-b);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}


/* ============================================================
   13. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  min-height: 38px;
  border: none;
  transition: background var(--transition), transform var(--transition-fast), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary  { background: var(--accent); color: var(--white); }
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-b);
}

.btn-secondary { background: var(--white); color: var(--accent); border: 1.5px solid var(--accent-b); }
.btn-secondary:hover { background: var(--accent-dim); border-color: var(--accent); }

.btn-ghost { background: transparent; color: var(--grey); border: 1px solid var(--bg2); }
.btn-ghost:hover { border-color: var(--accent-b); color: var(--accent); }


/* ============================================================
   14. MODE TOGGLE
   ============================================================ */
.mode-bar {
  display: flex;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
}

.mode-btn {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 7px 16px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mode-btn + .mode-btn { border-left: 1px solid var(--accent); }
.mode-btn.active { background: var(--accent); color: var(--white); }
.mode-btn:hover:not(.active) { background: var(--accent-dim); }


/* ============================================================
   15. TABLES
   ============================================================ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg2);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead tr { background: var(--accent-dim); border-bottom: 2px solid var(--accent-b); }

thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}

tbody tr { border-bottom: 1px solid var(--bg2); transition: background var(--transition-fast); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--accent-dim); }
tbody tr:nth-child(even) { background: rgba(0,0,0,.015); } /* terlalu kecil jadi token, disengaja */
tbody td { padding: 10px 14px; color: var(--ink); line-height: 1.5; }


/* ============================================================
   16. PROGRESS BAR
   ============================================================ */
.progress-bar { height: 3px; background: var(--bg2); border-radius: 2px; overflow: hidden; }

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width .6s ease;
}


/* ============================================================
   17. BADGES / PILLS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-b);
  background: var(--accent-dim);
  color: var(--accent);
  white-space: nowrap;
}

.badge-grey  { border-color: var(--bg2); background: var(--bg); color: var(--grey); }
.badge-green { border-color: var(--accent2-dim); background: var(--accent2-dim); color: var(--accent2-dark); }


/* ============================================================
   18. NEXT BOOK (bottom CTA)
   ============================================================ */
.next-book { background: var(--white); border-top: 1px solid var(--bg2); padding: 32px 20px 48px; }

.next-book-inner { max-width: var(--content-w); margin: 0 auto; }

.next-book-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 16px;
  text-align: center;
}

.next-book-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg);
  border: 1.5px solid var(--bg2);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  color: inherit;
  transition: all var(--transition);
}
.next-book-card:hover {
  border-color: var(--accent-b);
  box-shadow: 0 4px 24px var(--accent-dim);
  transform: translateY(-2px);
}

.next-book-series {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.next-book-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: 1.2;
}

.next-book-arrow {
  font-size: 28px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .25s;
}
.next-book-card:hover .next-book-arrow { transform: translateX(5px); }

@media (min-width: 580px) {
  .next-book { padding: 40px 24px 60px; }
  .next-book-card { padding: 24px 28px; }
}


/* ============================================================
   19. UTILITY CLASSES
   ============================================================ */

/* Layout */
.container      { max-width: var(--content-w); margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: var(--content-wide); margin: 0 auto; padding: 0 20px; }
.pt-nav         { padding-top: var(--nav-h); }

/* Text */
.text-accent    { color: var(--accent); }
.text-grey      { color: var(--grey); }
.text-muted     { color: var(--grey-light); }
.text-ink       { color: var(--ink); }
.text-error     { color: var(--error); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.font-mono      { font-family: var(--font-mono); }
.font-display   { font-family: var(--font-display); }
.label-mono     { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); text-transform: uppercase; }

/* Spacing */
.mt-section     { margin-top: var(--space-xl); }
.mb-section     { margin-bottom: var(--space-xl); }

/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 580px) {
  .grid-2         { grid-template-columns: 1fr 1fr; }
  .container      { padding: 0 24px; }
  .container-wide { padding: 0 24px; }
}
