:root
{
  /* TYPEFACE */
  --font-ui: 'Fira Sans', system-ui;
  --font-heading: 'Fira Sans', system-ui;
  --font-nomor-ayat: 'Roboto Mono', monospace;
  --font-ayat: 'Bitter', ui-serif;

  /* UKURAN FONT UI */
  --ukuran-font-ui-general: 18px;
  --ukuran-font-ui-h1: 28px;
  --ukuran-font-ui-h2: 26px;
  --ukuran-font-ui-h3: 20px;
  --ukuran-font-ui-h4: 18px;
  --ukuran-font-ui-loading: 42px;

  /* UKURAN FONT ALKITAB */
  --ukuran-font-nomor-ayat: 12px;
  --ukuran-font-perikop-ayat: 26px;
  --ukuran-font-paralel-ayat: 20px;
  --ukuran-font-konten-ayat: 18px;

  /* UKURAN TOMBOL REFERENSI */
  --ukuran-tombol-referensi-desktop: 17px;
  --ukuran-tombol-referensi-mobile: 20px;

  /* UKURAN BORDER */
  --ukuran-border-general: 1px;
  --ukuran-border-antar-ayat: 1px;
  --ukuran-border-antar-perikop: 1px;

  /* STYLE BORDER */
  --style-border-general: solid;
  --style-border-antar-ayat: dashed;
  --style-border-antar-perikop: solid;
}

@media (prefers-color-scheme: light)
{
  /* Styles for light mode */
  :root
  {
    /* WARNA FONT ALKITAB */
    --warna-teks-ayat: #171717;
    --warna-redtext: #c91337;
    --warna-teks-heading: #171717;
    --warna-nomor-ayat: #001d71;
    --warna-link: #093bd2;
    --warna-teks-ayat-terpilih: #ffffff;
    --warna-redtext-terpilih: #f2aaaa;
    --warna-bg-alamat: #00000020;

    /* WARNA FONT UI */
    --warna-teks-ui-general: #171717;
    --warna-teks-opsi-terpilih: #ffffff;
    --warna-teks-tombol: #ffffff;
    --warna-perjanjian-baru: #c91337;
    --warna-perjanjian-lama: #000080;

    /* WARNA UI ALKITAB */
    --warna-bg-alkitab: #eeeeee;
    --warna-bg-ayat: #efefef;
    --warna-bg-ayat-terpilih: #001d71;
    --warna-bg-tombol-referensi: #171717;
    --warna-ikon-tombol-referensi: #ffffff;
    --warna-bg-tombol-referensi-terpilih: #ffffff;
    --warna-ikon-tombol-referensi-terpilih: #171717;

    /* WARNA UI GENERAL*/
    --warna-bg-header: #efefef;
    --warna-bg-ui: #efefef;
    --warna-bg-footer: #efefef;
    --warna-grayout: #000000;
    --opacity-grayout: 0.6;

    /* WARNA UI OPTION */
    --warna-bg-opsi-terpilih: #001d71;
    --warna-bg-hover: #d3d3d3;
    --warna-bg-tombol: #171717;
    --warna-ikon-tombol: #ffffff;
    --warna-bg-opsi-setting-terpilih: #001d71;
    --warna-teks-opsi-setting-terpilih: #ffffff;

    /* WARNA BORDER */
    --warna-border-general: #6e6e6e;
    --warna-border-antar-ayat: #6e6e6e;
    --warna-border-antar-perikop: #6e6e6e;
    --warna-border-terpilih: #efefef;
  }
}

@media (prefers-color-scheme: dark)
{
  /* Styles for dark mode */
  :root
  {
    /* WARNA FONT ALKITAB */
    --warna-teks-ayat: #ffffff;
    --warna-redtext: #ff6347;
    --warna-teks-heading: #ffffff;
    --warna-nomor-ayat: #3ac8f8;
    --warna-link: #87ceeb;
    --warna-teks-ayat-terpilih: #000000;
    --warna-redtext-terpilih: #640000;
    --warna-bg-alamat: #ffffff15;

    /* WARNA FONT UI */
    --warna-teks-ui-general: #ffffff;
    --warna-teks-opsi-terpilih: #000000;
    --warna-teks-tombol: #000000;
    --warna-perjanjian-baru: #FF6347;
    --warna-perjanjian-lama: #b7c6f3;

    /* WARNA UI ALKITAB */
    --warna-bg-alkitab: #191919;
    --warna-bg-ayat: #202020;
    --warna-bg-ayat-terpilih: #3ac8f8;
    --warna-bg-tombol-referensi: #ffffff;
    --warna-ikon-tombol-referensi: #000000;
    --warna-bg-tombol-referensi-terpilih: #000000;
    --warna-ikon-tombol-referensi-terpilih: #ffffff;

    /* WARNA UI GENERAL*/
    --warna-bg-header: #202020;
    --warna-bg-ui: #202020;
    --warna-bg-footer: #202020;
    --warna-grayout: #000000;
    --opacity-grayout: 0.8;

    /* WARNA UI OPTION */
    --warna-bg-opsi-terpilih: #3ac8f8;
    --warna-bg-hover: #373737;
    --warna-bg-tombol: #ffffff;
    --warna-ikon-tombol: #000000;
    --warna-bg-opsi-setting-terpilih: #3ac8f8;
    --warna-teks-opsi-setting-terpilih: #000000;

    /* WARNA BORDER */
    --warna-border-general: #6e6e6e;
    --warna-border-antar-ayat: #6e6e6e;
    --warna-border-antar-perikop: #6e6e6e;
    --warna-border-terpilih: #000000;
  }
}