:root {
  /*Controls*/
  --script-size: calc(1rem * var(--fs-mod, 1));
  --header-height: 6rem;
  --header-width: min(32rem, 100%);
  --custom-scrollbar-width: 4px;
  --header-padding: 2.4rem;
  --option-height: 2.7rem;
  --option-height-modal: 6rem;
  --input-height: calc(0.6 * var(--header-height));
  --menu-padding: 0.6rem;
  --preview-base-size: 10px;
  --gloss-container-track-size: 1fr;
  --gloss-container-height: 0px;
  --quranic-height: calc(6 * var(--script-size));
  --line-height: calc(var(--quranic-height) + var(--gloss-container-height));
  --tippy-border-radius: 7px;

  /*Fonts*/
  --font-medina: "Medina";
  --font-ottoman: "Ottoman";
  --font-asia: "Asia";
  --font-indonesia: "Indonesia";

  --blue: #273557;
  --bookmark: #802f3e;
}

[data-theme="light"] {
  --bg: #fbfbfa;
  --text: black;
  --chrome-bg: #ededec;
  --chrome-color: #666;
  --input-bg: #d7d7d8;
  --input-focus: #e2e2e2;
  --gloss1: rgb(163, 21, 21);
  --gloss2: rgb(4, 81, 165);
  --gloss3: rgb(158, 111, 10);
  --gloss4: rgb(0, 128, 0);
  --gloss5: rgb(115, 57, 128);
  --highlight-bg-1: #fff59d;
  --highlight-bg-2: #c5e1ff;
  --highlight-bg-3: #c8facc;
  --highlight-bg-4: #ffd6e7;
  --highlight-bg-5: #ffe7c2;
  --highlight-bg: var(--highlight-bg-1);
  --double-highlight-bg-1: #ffe66b;
  --double-highlight-bg-2: #9ec9ff;
  --double-highlight-bg-3: #a6f1b4;
  --double-highlight-bg-4: #ffb4da;
  --double-highlight-bg-5: #ffd5ab;
  --double-highlight-bg: var(--double-highlight-bg-1);
  --active-bg: #3266d0;
  --active-bg-alt: #2c59b3;
  --border-color: rgba(0, 0, 0, 0.2);
  --border: solid 1px var(--border-color);
  --primary: white;
  --contrast: black;
  --custom-scrollbar: var(--blue);
  --status-bar: var(--blue);
  --glow: deeppink;
  --accent: var(--blue);
  --gold: #ccb479;
  --gold-alt: #96865e;
  --checked-color: var(--accent);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1c1d;
  --text: #d4d4d4;
  --chrome-bg: #2d2d2c;
  --chrome-color: #bbb;
  --input-bg: #1b1b1c;
  --input-focus: #242424;
  --gloss1: rgb(206, 145, 120);
  --gloss2: rgb(86, 156, 214);
  --gloss3: rgb(215, 186, 125);
  --gloss4: rgb(181, 206, 168);
  --gloss5: rgb(181, 134, 192);
  --highlight-bg-1: #747733;
  --highlight-bg-2: #2f546c;
  --highlight-bg-3: #365f4c;
  --highlight-bg-4: #6e4a6d;
  --highlight-bg-5: #6a4f40;
  --highlight-bg: var(--highlight-bg-1);
  --double-highlight-bg-1: #b8bb46;
  --double-highlight-bg-2: #4184b0;
  --double-highlight-bg-3: #4f9b77;
  --double-highlight-bg-4: #ae6caa;
  --double-highlight-bg-5: #af7c5d;
  --double-highlight-bg: var(--double-highlight-bg-1);
  --active-bg: #2c59b3;
  --active-bg-alt: #3266d0;
  --border-color: rgba(255, 255, 255, 0.2);
  --border: solid 1px var(--border-color);
  --primary: black;
  --contrast: white;
  --custom-scrollbar: #616161;
  --status-bar: #292929;
  --glow: deepskyblue;
  --accent: white;
  --gold: #96865e;
  --gold-alt: #ccb479;
  --checked-color: var(--border-color);
}