/* =====================================================================
   WaktuKerja brand override untuk Material for MkDocs — palette
   "Vibrant Tenun" / Sogan-Kawung (Java batik-inspired).

   Color tokens 1:1 dengan frontend/src/styles/tokens.css supaya manual
   user serasa dengan aplikasi. Override CSS custom properties Material
   (--md-*) — tidak menyentuh struktur HTML/JS.
   ===================================================================== */

/* ───── Light mode (default) ───── */
[data-md-color-scheme="default"] {
  /* Primary (top bar, navigation links active) — Indigo Java tenun */
  --md-primary-fg-color:        #1F3A5F;   /* indigo-700 */
  --md-primary-fg-color--light: #36527B;   /* indigo-500 */
  --md-primary-fg-color--dark:  #0E1E36;   /* indigo-900 */
  --md-primary-bg-color:        #FAF1D9;   /* cream paper untuk text on header */
  --md-primary-bg-color--light: rgba(250, 241, 217, 0.75);

  /* Accent (link hover, search highlight, tombol) — Ochre (kawung emas) */
  --md-accent-fg-color:         #C04528;   /* terracotta — readable on cream */
  --md-accent-fg-color--transparent: rgba(192, 69, 40, 0.1);
  --md-accent-bg-color:         #FAF1D9;
  --md-accent-bg-color--light:  rgba(250, 241, 217, 0.5);

  /* Background body — cream batik paper */
  --md-default-bg-color:        #FAF1D9;
  --md-default-bg-color--light: #F2E0B6;
  --md-default-bg-color--lighter: #E8D8AC;
  --md-default-bg-color--lightest: #EAD8B0;

  /* Foreground text — dark sogan brown */
  --md-default-fg-color:        rgba(31, 22, 18, 0.87);
  --md-default-fg-color--light: rgba(74, 50, 32, 0.87);
  --md-default-fg-color--lighter: rgba(107, 76, 48, 0.72);
  --md-default-fg-color--lightest: rgba(107, 76, 48, 0.32);

  /* Code block backgrounds */
  --md-code-bg-color:           #E8D8AC;
  --md-code-fg-color:           #4A3220;
  --md-code-hl-color:           rgba(224, 171, 31, 0.4);  /* ochre highlight */

  /* Admonition title accents */
  --md-typeset-a-color:         #C04528;   /* link = terracotta */

  /* Footer */
  --md-footer-bg-color:         #0E1E36;
  --md-footer-bg-color--dark:   #0E1E36;
  --md-footer-fg-color:         #FAF1D9;
}

/* ───── Dark mode (slate scheme) ───── */
[data-md-color-scheme="slate"] {
  --md-hue: 220;                           /* warm slate dengan undertone biru */

  /* Primary tetap indigo deep — kontras di gelap */
  --md-primary-fg-color:        #36527B;   /* indigo-500 (lebih terang di dark) */
  --md-primary-fg-color--light: #5C7BA5;
  --md-primary-fg-color--dark:  #1F3A5F;
  --md-primary-bg-color:        #FAF1D9;
  --md-primary-bg-color--light: rgba(250, 241, 217, 0.7);

  /* Accent tetap ochre/terracotta — hangat di dark */
  --md-accent-fg-color:         #F0C654;   /* ochre-l untuk kontras gelap */
  --md-accent-fg-color--transparent: rgba(240, 198, 84, 0.12);
  --md-accent-bg-color:         #0E1E36;

  /* Background base dark */
  --md-default-bg-color:        #0E1E36;   /* indigo-900 */
  --md-default-bg-color--light: #1F3A5F;
  --md-default-bg-color--lighter: #2A4670;
  --md-default-bg-color--lightest: #34527E;

  /* Foreground cream */
  --md-default-fg-color:        rgba(250, 241, 217, 0.9);
  --md-default-fg-color--light: rgba(242, 224, 182, 0.78);
  --md-default-fg-color--lighter: rgba(220, 199, 150, 0.62);
  --md-default-fg-color--lightest: rgba(199, 172, 120, 0.32);

  --md-code-bg-color:           #1F3A5F;
  --md-code-fg-color:           #F0C654;

  --md-typeset-a-color:         #F0C654;

  --md-footer-bg-color:         #0A1626;
  --md-footer-bg-color--dark:   #050B14;
  --md-footer-fg-color:         #FAF1D9;
}

/* ───── Typography — sesuaikan dengan font app ───── */
:root {
  --md-text-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-code-font: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: 'Lora', Georgia, serif;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 700;
  border-bottom: 2px solid #E0AB1F;          /* underline kawung gold */
  padding-bottom: 0.4em;
  position: relative;
}
/* Strip terracotta kecil di pojok kiri H1 — meniru tab heading di app */
.md-typeset h1::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 60px; height: 2px;
  background: #C04528;
}

/* H2 dengan accent kecil di kiri */
.md-typeset h2 {
  font-weight: 600;
  border-left: 4px solid #E0AB1F;
  padding-left: 12px;
  margin-left: -16px;
}

/* ───── Table — paper batik look ───── */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-bg-color--lighter);
  font-size: 0.85em;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78em;
}
.md-typeset table:not([class]) tr:nth-child(2n) {
  background: rgba(224, 171, 31, 0.05);     /* zebra ochre tipis */
}

/* ───── Admonitions ───── */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #1F3A5F;
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #5E8038;                     /* moss */
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #E0AB1F;                     /* ochre */
}
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: #C04528;                     /* terracotta */
}

/* ───── Header — solid indigo dengan accent ochre di bawah ───── */
.md-header {
  box-shadow: 0 0 0 1px rgba(14, 30, 54, 0.4), 0 2px 0 #E0AB1F;
}

/* ───── Search modal — paper feel ───── */
.md-search__input {
  background: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color);
}

/* ───── Code blocks — sedikit hangat ───── */
.md-typeset code {
  border-radius: 4px;
  padding: 0.1em 0.35em;
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  font-weight: 500;
}
.md-typeset pre > code {
  border-radius: 8px;
}

/* ───── Logo placeholder (kalau ada logo.svg di-add ke theme.logo) ─── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* ───── Footer ringkas ───── */
.md-footer-meta {
  background: var(--md-footer-bg-color--dark);
}