/* ==========================================================================
   FBE UII — Tema Open edX
   Sumber token: https://fbe.uii.ac.id/design-system
   Cakupan: LMS, MFE (apps.*), dan halaman legacy (instructor/Studio).

   Cara kerja:
   - Open edX (Verawood / Paragon 23) memakai CSS custom properties
     --pgn-color-* yang didefinisikan pada :root oleh paragon-theme-variants.
   - File tema Paragon dimuat BELAKANGAN oleh frontend-platform, sehingga
     override di sini memakai selector "html:root" (specificity lebih tinggi)
     agar tetap menang tanpa perlu !important.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

html:root {
  /* ---------- Token inti FBE ---------- */
  --fbe-universityblue-500: #031e53;
  --fbe-universityblue-300: #56688c;
  --fbe-universityblue-100: #b1b9ca;
  --fbe-universityblue-50:  #e6e9ee;

  --fbe-facultygray-500: #3a3a3b;
  --fbe-facultygray-300: #7b7b7c;
  --fbe-facultygray-100: #c2c2c2;
  --fbe-facultygray-50:  #ebebeb;

  --fbe-accent-500: #f7ca26;
  --fbe-accent-300: #fadb6e;
  --fbe-accent-100: #fdefbc;
  --fbe-accent-50:  #fefae9;

  --fbe-text-500: #070513;
  --fbe-text-200: #8d8c92;

  --fbe-surface-normal:  #fdfeff;
  --fbe-surface-softgray: #fcfdff;
  --fbe-surface-softblue: #fcfeff;

  /* ---------- Paragon: primary (navy FBE) ---------- */
  --pgn-color-primary-base: #031e53;
  --pgn-color-primary-100: #e6e9ee;
  --pgn-color-primary-200: #b1b9ca;
  --pgn-color-primary-300: #7e8aa5;
  --pgn-color-primary-400: #56688c;
  --pgn-color-primary-500: #031e53;
  --pgn-color-primary-600: #031a47;
  --pgn-color-primary-700: #02163d;
  --pgn-color-primary-800: #021232;
  --pgn-color-primary-900: #010e28;

  /* ---------- Paragon: brand (samakan dengan primary) ---------- */
  --pgn-color-brand-base: #031e53;
  --pgn-color-brand-100: #e6e9ee;
  --pgn-color-brand-200: #b1b9ca;
  --pgn-color-brand-300: #7e8aa5;
  --pgn-color-brand-400: #29406b;
  --pgn-color-brand-500: #031e53;
  --pgn-color-brand-600: #031a47;
  --pgn-color-brand-700: #02163d;
  --pgn-color-brand-800: #021232;
  --pgn-color-brand-900: #010e28;

  /* ---------- Paragon: accent (gold FBE) ---------- */
  --pgn-color-accent-a: #f7ca26;
  --pgn-color-accent-b: #fdefbc;

  /* ---------- Paragon: netral ---------- */
  --pgn-color-gray-100: #ebebeb;
  --pgn-color-gray-200: #c2c2c2;
  --pgn-color-gray-300: #adadad;
  --pgn-color-gray-400: #8d8c92;
  --pgn-color-gray-500: #7b7b7c;
  --pgn-color-gray-600: #5c5c5c;
  --pgn-color-gray-700: #3a3a3b;
  --pgn-color-gray-800: #2b2b2c;
  --pgn-color-gray-900: #070513;
  --pgn-color-gray-base: #7b7b7c;

  /* ---------- Paragon: dark & light ---------- */
  --pgn-color-dark-base: #070513;
  --pgn-color-dark-500: #070513;
  --pgn-color-dark-600: #050410;

  --pgn-color-light-base: #e6e9ee;
  --pgn-color-light-500: #e6e9ee;
  --pgn-color-light-600: #c2c2c2;

  /* ---------- Paragon: permukaan & teks ---------- */
  --pgn-color-body-base: #3a3a3b;
  --pgn-color-body-bg: #fdfeff;
  --pgn-color-text-muted: #7b7b7c;
  --pgn-color-headings-base: #031e53;

  /* Paragon memakai warna "info" untuk tautan; arahkan ke navy FBE */
  --pgn-color-link-base: #031e53;
  --pgn-color-link-inline-base: #031e53;
  --pgn-color-link-muted-hover: #02163d;
  --pgn-color-link-muted-inline-decoration: #031e534d;
  --pgn-color-link-muted-inline-hover-base: #02163d;
  --pgn-color-link-brand-hover: #02163d;
  --pgn-color-link-brand-inline-decoration: #031e534d;
  --pgn-color-link-brand-inline-hover-base: #02163d;

  /* Banner beranda katalog: default Open edX memakai abu-abu, ubah ke navy */
  --catalog-home-page-banner-background-color: #031e53;

  /* ---------- Paragon: tipografi ---------- */
  --pgn-typography-font-family-sans-serif: "Roboto", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --pgn-typography-font-family-base: "Roboto", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

/* ---------- Tipografi: heading Montserrat, body Roboto ---------- */
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  color: #3a3a3b;
  background-color: #fdfeff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: "Montserrat", "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700;
}

/* Warna heading & teks isi diatur lewat token
   (--pgn-color-headings-base / --pgn-color-body-base) agar konteks gelap
   seperti hero course tidak ikut tertimpa. */

::selection {
  background: #f7ca26;
  color: #070513;
}

/* ---------- Tombol legacy (LMS instructor, Studio, Django admin) ---------- */
.btn-primary {
  background-color: #031e53;
  border-color: #031e53;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #02163d;
  border-color: #02163d;
  color: #fff;
}

.btn-outline-primary {
  color: #031e53;
  border-color: #031e53;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #031e53;
  border-color: #031e53;
  color: #fff;
}

/* Tombol pencarian di banner katalog: navy di atas navy tidak terlihat,
   jadi pakai aksen gold FBE (teks gelap, kontras 12,9:1). */
.home-banner .pgn__searchfield__button.btn-primary {
  background-color: #f7ca26;
  border-color: #f7ca26;
  color: #070513;
}
.home-banner .pgn__searchfield__button.btn-primary:hover,
.home-banner .pgn__searchfield__button.btn-primary:focus,
.home-banner .pgn__searchfield__button.btn-primary:active {
  background-color: #fadb6e;
  border-color: #fadb6e;
  color: #070513;
}

/* Aksen garis atas ala kartu FBE (dipakai hemat, hanya untuk header seksi) */
.fbe-accent-top {
  border-top: 4px solid #f7ca26;
}