@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");

@font-face {
  font-family: Apolline_Italic;
  src: url("font/Apolline-Italic.woff2");
}

:root {
  /* colors are rgb main 3 no of rgb.
  ex: rgba(29, 42, 72) */

  /* common start */
  --primary-brand-clr: 29, 42, 72;
  --primary-bg-clr: 247, 246, 246;
  --alt-bg-clr: 239, 236, 234;
  --module-bg-clr: 255, 255, 255;
  

  --body-fs: 12px;
  --body-ff: "Montserrat";
  --body-fw: 400;
  --body-clr: 15, 15, 15;

  --sm-fs-1: 12px;
  --sm-fs-2: 10px;

  --md-fs-1: 14px;
  --md-fs-2: 13px;

  --lg-fs-1: 30px;
  --lg-fs-2: 28px;

  --xxl-fs-1: 60px;

  --body-alt-ff: "Montserrat";
  --body-alt-fw: 400;
  --body-alt-clr: 91, 91, 91;

  /* primary heading start */
  --primary-heading-fs: 15px;
  --primary-heading-fw: 700;
  --primary-heading-ff: "Montserrat";
  --primary-heading-clr: var(--primary-brand-clr);
  /* primary heading end */

  /* secondary heading start */
  --secondary-heading-fs: 13px;
  --secondary-heading-fw: 700;
  --secondary-heading-ff: "Montserrat";
  --secondary-heading-clr: 111, 157, 201;
  /* secondary heading end */

  /* secondary heading alt start */
  --secondary-heading-alt-fs: 14px;
  --secondary-heading-alt-fw: 500;
  --secondary-heading-alt-ff: "Montserrat";
  --secondary-heading-alt-clr: var(--primary-brand-clr);
  /* secondary heading alt end */

  /* alt heading start */
  --alt-heading-fs: 15px;
  --alt-heading-fw: 500;
  --alt-heading-ff: "Merriweather";
  --alt-heading-clr: var(--primary-brand-clr);
  /* alt heading end */

  /* module heading start */
  --module-heading-fs: 20px;
  --module-heading-fw: 700;
  --module-heading-ff: "Montserrat";
  --module-heading-clr: var(--primary-brand-clr);
  /* module heading end */

  /* module sub heading start */
  --module-sub-heading-fs: 15px;
  --module-sub-heading-fw: 600;
  --module-sub-heading-ff: "Montserrat";
  --module-sub-heading-clr: var(--primary-brand-clr);
  /* module sub heading end */

  --icn-clr: var(--body-alt-clr);
  --border-radius: 5px;

  --btn-ff: "Montserrat";
  --btn-fw: 500;
  --btn-fs: 12px;
  --btn-clr: var(--primary-brand-clr);
  --btn-border-radius: 25px;

  --btn-alt-border-radius: 10px;

  --btn-alt-clr: var(--secondary-heading-clr);
  /* common end */

  /* navbar start */
  --main-nav-ff: "Montserrat";
  --main-nav-fw: 400;
  --main-nav-fs: 12px;
  --main-nav-clr: 255, 255, 255;

  --main-nav-clr-dark: var(--primary-brand-clr);
  /* navbar end */

  /* form fields */
  --form-field-bg-clr: var(--primary-bg-clr);
  --form-field-clr: var(--primary-brand-clr);
  --form-field-placeholder-clr: var(--icn-clr);
  --form-field-fw: 400;
  --form-field-fs: 12px;
  --form-field-border-radius: 25px;

  /* sidebar start */
  --sidebar-heading-fs: 14px;
  --sidebar-body-fs: 12px;
  --sidebar-ff: "Montserrat";
  --sidebar-clr: var(--primary-brand-clr);
  --sidebar-fw: 500;

  --sidebar-sub-heading-fs: 12px;
  --sidebar-sub-heading-fw: 700;
  --sidebar-sub-heading-clr: var(--secondary-heading-clr);
  --sidebar-sub-heading-ff: "Montserrat";
  /* sidebar end */

  /* menu items start */
  --menu-ff: "Montserrat";
  --menu-fs: var(--main-nav-fs);
  --menu-fw: var(--main-nav-fw);
  --menu-clr: var(--primary-brand-clr);
  /* menu items end */

  --highlight-clr-one: 93, 83, 37;
  --highlight-clr-two: 210, 181, 137;

  --brand-clr-1: 136, 144, 178;
  --brand-clr-2: 93, 83, 37;
  --brand-clr-3: 210, 181, 137;
  --brand-clr-4: 108, 146, 195;
  --brand-clr-5: 29, 42, 72;
  --brand-clr-6: 91, 91, 91;
  --brand-clr-7: 68, 100, 158;
}

[data-bs-theme="dark"] {
  --primary-brand-clr: 29, 42, 72;
  --primary-bg-clr: 24, 36, 62;
  --module-bg-clr: 19, 28, 48;
  --body-clr: 255, 255, 255;
  --body-alt-clr: 190, 190, 190;
  --primary-heading-clr: var(--body-clr);
  --secondary-heading-clr: 68, 100, 158;
  --secondary-heading-alt-clr: var(--body-clr);
  --module-heading-clr: var(--body-clr);
  --module-sub-heading-clr: var(--body-clr);
  --icn-clr: var(--body-clr);
  --btn-clr: var(--body-clr);
  --btn-alt-clr: var(--secondary-heading-clr);
  --main-nav-clr: var(--body-clr);
  --main-nav-clr-dark: var(--primary-brand-clr);
  --form-field-bg-clr: var(--primary-bg-clr);
  --form-field-clr: var(--body-alt-clr);
  --sidebar-clr: var(--body-clr);
  --sidebar-sub-heading-clr: var(--secondary-heading-clr);
  --menu-clr: var(--body-clr);
  --highlight-clr-one: 199, 75, 80;
  --highlight-clr-two: 212, 155, 84;
}