@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@theme-base-font-family-1: 'Noto Serif', serif;
@theme-base-font-family-2: 'Public Sans', sans-serif;
@theme-base-font-family-3: 'Poppins', sans-serif;
@theme-base-font-family-4: 'Lora', serif;

@theme-font-variants: {
  // Noto Serif and Public Sans
  @variant-1: {
    header-font-family: @theme-base-font-family-1;
    body-font-family: @theme-base-font-family-2;
  };
  // Poppins and Poppins
  @variant-2: {
    header-font-family: @theme-base-font-family-3;
    body-font-family: @theme-base-font-family-3;
  };
  // Lora and Public Sans
  @variant-3: {
    header-font-family: @theme-base-font-family-4;
    body-font-family: @theme-base-font-family-2;
  };
}

@theme-1-base-color: #8B33FF;
@theme-1-dark-gradient-color: #8B33FF;
@theme-1-gradient-color: #FF911F;
@theme-1-base-light-color: #EDDDFC;
@theme-1-gradient-light-color: #FFECD9;
@theme-1-color-0: #000000;
@theme-1-color-10: #280057;
@theme-1-color-20: #420089;
@theme-1-color-25: #5100a4;
@theme-1-color-30: #5f00c0;
@theme-1-color-35: #6e00dc;
@theme-1-color-40: #7c18f0;
@theme-1-color-50: #944aff;
@theme-1-color-60: #aa73ff;
@theme-1-color-70: #c098ff;
@theme-1-color-80: #d6baff;
@theme-1-color-90: #ecdcff;
@theme-1-color-95: #f7edff;
@theme-1-color-98: #fef7ff;
@theme-1-color-99: #fffbff;
@theme-1-color-100: #ffffff;
@theme-1-bg-gradient-dark: linear-gradient(138deg, @theme-1-dark-gradient-color 0%, @theme-1-gradient-color 99.12%);
@theme-1-bg-gradient-light: linear-gradient(108deg, @theme-1-base-light-color 0%, @theme-1-gradient-light-color 100%);
@theme-1-text-color-dark-gradient: @theme-1-color-99;

@theme-2-base-color: #138CFC;
@theme-2-dark-gradient-color: #1D256A;
@theme-2-gradient-color: #3391FF;
@theme-2-base-light-color: #DCE7F1;
@theme-2-gradient-light-color: #F8F8FF;
@theme-2-color-0: #000000;
@theme-2-color-10: #001c3b;
@theme-2-color-20: #00315f;
@theme-2-color-25: #003c72;
@theme-2-color-30: #004786;
@theme-2-color-35: #00539b;
@theme-2-color-40: #005fb0;
@theme-2-color-50: #0077db;
@theme-2-color-60: #2992ff;
@theme-2-color-70: #72adff;
@theme-2-color-80: #a6c8ff;
@theme-2-color-90: #d5e3ff;
@theme-2-color-95: #ebf1ff;
@theme-2-color-98: #f9f9ff;
@theme-2-color-99: #fdfcff;
@theme-2-color-100: #ffffff;
@theme-2-bg-gradient-dark: linear-gradient(138deg, @theme-2-dark-gradient-color 0%, @theme-2-gradient-color 99.18%);
@theme-2-bg-gradient-light: linear-gradient(138deg, @theme-2-base-light-color 0%, @theme-2-gradient-light-color 99.18%);
@theme-2-text-color-dark-gradient: @theme-2-color-99;

@theme-3-base-color: #01DEB9;
@theme-3-dark-gradient-color: #01DEB9;
@theme-3-gradient-color: #0383DB;
@theme-3-base-light-color: #DAECF0;
@theme-3-gradient-light-color: #F0FBFE;
@theme-3-color-0: #000000;
@theme-3-color-10: #002019;
@theme-3-color-20: #00382d;
@theme-3-color-25: #004437;
@theme-3-color-30: #005142;
@theme-3-color-35: #005e4d;
@theme-3-color-40: #006b58;
@theme-3-color-50: #00876f;
@theme-3-color-60: #00a388;
@theme-3-color-70: #00c1a1;
@theme-3-color-80: #0ae0ba;
@theme-3-color-90: #4afdd6;
@theme-3-color-95: #b8ffe9;
@theme-3-color-98: #e6fff5;
@theme-3-color-99: #f3fff9;
@theme-3-color-100: #ffffff;
@theme-3-bg-gradient-dark: linear-gradient(135deg, @theme-3-dark-gradient-color 0%, @theme-3-gradient-color 99.94%);
@theme-3-bg-gradient-light: linear-gradient(135deg, @theme-3-base-light-color 0%, @theme-3-gradient-light-color 99.94%);
@theme-3-text-color-dark-gradient: @theme-3-color-99;

@theme-4-base-color: #FF9432;
@theme-4-dark-gradient-color: #64262E;
@theme-4-gradient-color:  #F68080;
@theme-4-base-light-color: #FBEFE9;
@theme-4-gradient-light-color: #FFFFEE;
@theme-4-color-0: #000000;
@theme-4-color-10: #2f1500;
@theme-4-color-20: #4e2600;
@theme-4-color-25: #5e2f00;
@theme-4-color-30: #6f3800;
@theme-4-color-35: #804200;
@theme-4-color-40: #924c00;
@theme-4-color-50: #b66000;
@theme-4-color-60: #da7711;
@theme-4-color-70: #fb912f;
@theme-4-color-80: #ffb780;
@theme-4-color-90: #ffdcc4;
@theme-4-color-95: #ffede3;
@theme-4-color-98: #fff8f5;
@theme-4-color-99: #fffbff;
@theme-4-color-100: #ffffff;
@theme-4-bg-gradient-dark: linear-gradient(316deg, @theme-4-dark-gradient-color 1.21%, @theme-4-gradient-color 117.14%);
@theme-4-bg-gradient-light: linear-gradient(138deg, @theme-4-base-light-color 0%, @theme-4-gradient-light-color 99.28%);
@theme-4-text-color-dark-gradient: @theme-4-color-99;

@theme-5-base-color: #08B86F;
@theme-5-dark-gradient-color: #C8DAD3;
@theme-5-gradient-color: #F2F6F5;
@theme-5-base-light-color: #ffffff;
@theme-5-gradient-light-color: #F2F6F5;
@theme-5-color-0: #000000;
@theme-5-color-10: #002110;
@theme-5-color-20: #00391e;
@theme-5-color-25: #004526;
@theme-5-color-30: #00522e;
@theme-5-color-35: #005f37;
@theme-5-color-40: #006d3f;
@theme-5-color-50: #008951;
@theme-5-color-60: #00a663;
@theme-5-color-70: #25c379;
@theme-5-color-80: #4ddf92;
@theme-5-color-90: #6efdac;
@theme-5-color-95: #c1ffd3;
@theme-5-color-98: #e9ffec;
@theme-5-color-99: #f5fff4;
@theme-5-color-100: #ffffff;
@theme-5-bg-gradient-dark: linear-gradient(317deg, @theme-5-dark-gradient-color 0%, @theme-5-gradient-color 101.11%);
@theme-5-bg-gradient-light: linear-gradient(135deg, @theme-5-base-light-color 0%, @theme-5-gradient-light-color 99.94%);
@theme-5-text-color-dark-gradient: #050530;

@theme-6-base-color: #C4AC57;
@theme-6-dark-gradient-color: #2B2B2B;
@theme-6-gradient-color: #000000;
@theme-6-base-light-color: #C4AC57;
@theme-6-gradient-light-color: #FFFBEC;
@theme-6-color-0: #000000;
@theme-6-color-10: #231b00;
@theme-6-color-20: #3b2f00;
@theme-6-color-25: #483a00;
@theme-6-color-30: #554500;
@theme-6-color-35: #635100;
@theme-6-color-40: #715d00;
@theme-6-color-50: #8e7500;
@theme-6-color-60: #ab8e12;
@theme-6-color-70: #c7a930;
@theme-6-color-80: #e5c44a;
@theme-6-color-90: #ffe177;
@theme-6-color-95: #fff0c6;
@theme-6-color-98: #fff8ef;
@theme-6-color-99: #fffbff;
@theme-6-color-100: #ffffff;
@theme-6-bg-gradient-dark: linear-gradient(136.82deg, @theme-6-gradient-color -0.47%, @theme-6-dark-gradient-color 99.58%);
@theme-6-bg-gradient-light: linear-gradient(135deg, #FFF2C6 0%, @theme-6-gradient-light-color 100%);
@theme-6-text-color-dark-gradient: @theme-6-color-99;

@theme-error-color-0: #000000;
@theme-error-color-10: #410002;
@theme-error-color-20: #690005;
@theme-error-color-25: #7e0007;
@theme-error-color-30: #93000a;
@theme-error-color-35: #a80710;
@theme-error-color-40: #ba1a1a;
@theme-error-color-50: #de3730;
@theme-error-color-60: #ff5449;
@theme-error-color-70: #ff897d;
@theme-error-color-80: #ffb4ab;
@theme-error-color-90: #ffdad6;
@theme-error-color-95: #ffedea;
@theme-error-color-98: #fff8f7;
@theme-error-color-99: #fffbff;
@theme-error-color-100: #ffffff;

@theme-secondary-base-color: #050530;
@theme-secondary-color-0: #000000;
@theme-secondary-color-10: #191a2c;
@theme-secondary-color-20: #2e2f42;
@theme-secondary-color-25: #393a4d;
@theme-secondary-color-30: #454559;
@theme-secondary-color-35: #515165;
@theme-secondary-color-40: #5d5c72;
@theme-secondary-color-50: #75758b;
@theme-secondary-color-60: #8f8fa5;
@theme-secondary-color-70: #aaa9c1;
@theme-secondary-color-80: #c6c4dd;
@theme-secondary-color-90: #e2e0f9;
@theme-secondary-color-95: #f2efff;
@theme-secondary-color-98: #fcf8ff;
@theme-secondary-color-99: #fffbff;
@theme-secondary-color-100: #ffffff;
@theme-secondary-bg-gradient-dark: linear-gradient(135deg, @theme-secondary-base-color 0%, @theme-secondary-base-color 99.94%);
@theme-secondary-bg-gradient-light: linear-gradient(135deg, @theme-secondary-base-color 0%, @theme-secondary-base-color 99.94%);

@theme-neutral-color-0: #000000;
@theme-neutral-color-10: #1c1b1f;
@theme-neutral-color-20: #313034;
@theme-neutral-color-25: #3c3b3f;
@theme-neutral-color-30: #47464a;
@theme-neutral-color-35: #535256;
@theme-neutral-color-40: #5f5e62;
@theme-neutral-color-50: #78767a;
@theme-neutral-color-60: #929094;
@theme-neutral-color-70: #adaaaf;
@theme-neutral-color-80: #c8c5ca;
@theme-neutral-color-90: #e5e1e6;
@theme-neutral-color-95: #f3eff4;
@theme-neutral-color-98: #fcf8fd;
@theme-neutral-color-99: #fffbff;
@theme-neutral-color-100: #ffffff;

@themes: {
  @theme-1: {
    @colors: {
      color-0: @theme-1-color-0;
      color-10: @theme-1-color-10;
      color-20: @theme-1-color-20;
      color-25: @theme-1-color-25;
      color-30: @theme-1-color-30;
      color-35: @theme-1-color-35;
      color-40: @theme-1-color-40;
      color-50: @theme-1-color-50;
      color-60: @theme-1-color-60;
      color-70: @theme-1-color-70;
      color-80: @theme-1-color-80;
      color-90: @theme-1-color-90;
      color-95: @theme-1-color-95;
      color-98: @theme-1-color-98;
      color-99: @theme-1-color-99;
      color-100: @theme-1-color-100;
      base-color: @theme-1-base-color;
      base-light-color: @theme-1-base-light-color;
    };
    @gradients: {
      dark: @theme-1-bg-gradient-dark;
      dark-text-color: @theme-1-text-color-dark-gradient;
      light: @theme-1-bg-gradient-light;
    };
  };
  @theme-2: {
    @colors: {
      color-0: @theme-2-color-0;
      color-10: @theme-2-color-10;
      color-20: @theme-2-color-20;
      color-25: @theme-2-color-25;
      color-30: @theme-2-color-30;
      color-35: @theme-2-color-35;
      color-40: @theme-2-color-40;
      color-50: @theme-2-color-50;
      color-60: @theme-2-color-60;
      color-70: @theme-2-color-70;
      color-80: @theme-2-color-80;
      color-90: @theme-2-color-90;
      color-95: @theme-2-color-95;
      color-98: @theme-2-color-98;
      color-99: @theme-2-color-99;
      color-100: @theme-2-color-100;
      base-color: @theme-2-base-color;
      base-light-color: @theme-2-base-light-color;
    };
    @gradients: {
      dark: @theme-2-bg-gradient-dark;
      dark-text-color: @theme-2-text-color-dark-gradient;
      light: @theme-2-bg-gradient-light;
    };
  };
  @theme-3: {
    @colors: {
      color-0: @theme-3-color-0;
      color-10: @theme-3-color-10;
      color-20: @theme-3-color-20;
      color-25: @theme-3-color-25;
      color-30: @theme-3-color-30;
      color-35: @theme-3-color-35;
      color-40: @theme-3-color-40;
      color-50: @theme-3-color-50;
      color-60: @theme-3-color-60;
      color-70: @theme-3-color-70;
      color-80: @theme-3-color-80;
      color-90: @theme-3-color-90;
      color-95: @theme-3-color-95;
      color-98: @theme-3-color-98;
      color-99: @theme-3-color-99;
      color-100: @theme-3-color-100;
      base-color: @theme-3-base-color;
      base-light-color: @theme-3-base-light-color;
    };
    @gradients: {
      dark: @theme-3-bg-gradient-dark;
      dark-text-color: @theme-3-text-color-dark-gradient;
      light: @theme-3-bg-gradient-light;
    };
  };
  @theme-4: {
    @colors: {
      color-0: @theme-4-color-0;
      color-10: @theme-4-color-10;
      color-20: @theme-4-color-20;
      color-25: @theme-4-color-25;
      color-30: @theme-4-color-30;
      color-35: @theme-4-color-35;
      color-40: @theme-4-color-40;
      color-50: @theme-4-color-50;
      color-60: @theme-4-color-60;
      color-70: @theme-4-color-70;
      color-80: @theme-4-color-80;
      color-90: @theme-4-color-90;
      color-95: @theme-4-color-95;
      color-98: @theme-4-color-98;
      color-99: @theme-4-color-99;
      color-100: @theme-4-color-100;
      base-color: @theme-4-base-color;
      base-light-color: @theme-4-base-light-color;
    };
    @gradients: {
      dark: @theme-4-bg-gradient-dark;
      dark-text-color: @theme-4-text-color-dark-gradient;
      light: @theme-4-bg-gradient-light;
    };
  };
  @theme-5: {
    @colors: {
      color-0: @theme-5-color-0;
      color-10: @theme-5-color-10;
      color-20: @theme-5-color-20;
      color-25: @theme-5-color-25;
      color-30: @theme-5-color-30;
      color-35: @theme-5-color-35;
      color-40: @theme-5-color-40;
      color-50: @theme-5-color-50;
      color-60: @theme-5-color-60;
      color-70: @theme-5-color-70;
      color-80: @theme-5-color-80;
      color-90: @theme-5-color-90;
      color-95: @theme-5-color-95;
      color-98: @theme-5-color-98;
      color-99: @theme-5-color-99;
      color-100: @theme-5-color-100;
      base-color: @theme-5-base-color;
      base-light-color: @theme-5-base-light-color;
    };
    @gradients: {
      dark: @theme-5-bg-gradient-dark;
      dark-text-color: @theme-5-text-color-dark-gradient;
      light: @theme-5-bg-gradient-light;
    };
  };
  @theme-6: {
    @colors: {
      color-0: @theme-6-color-0;
      color-10: @theme-6-color-10;
      color-20: @theme-6-color-20;
      color-25: @theme-6-color-25;
      color-30: @theme-6-color-30;
      color-35: @theme-6-color-35;
      color-40: @theme-6-color-40;
      color-50: @theme-6-color-50;
      color-60: @theme-6-color-60;
      color-70: @theme-6-color-70;
      color-80: @theme-6-color-80;
      color-90: @theme-6-color-90;
      color-95: @theme-6-color-95;
      color-98: @theme-6-color-98;
      color-99: @theme-6-color-99;
      color-100: @theme-6-color-100;
      base-color: @theme-6-base-color;
      base-light-color: @theme-6-base-light-color;
    };
    @gradients: {
      dark: @theme-6-bg-gradient-dark;
      dark-text-color: @theme-6-text-color-dark-gradient;
      light: @theme-6-bg-gradient-light;
    };
  }
  @secondary: {
    @colors: {
      color-0: @theme-secondary-color-0;
      color-10: @theme-secondary-color-10;
      color-20: @theme-secondary-color-20;
      color-25: @theme-secondary-color-25;
      color-30: @theme-secondary-color-30;
      color-35: @theme-secondary-color-35;
      color-40: @theme-secondary-color-40;
      color-50: @theme-secondary-color-50;
      color-60: @theme-secondary-color-60;
      color-70: @theme-secondary-color-70;
      color-80: @theme-secondary-color-80;
      color-90: @theme-secondary-color-90;
      color-95: @theme-secondary-color-95;
      color-98: @theme-secondary-color-98;
      color-99: @theme-secondary-color-99;
      color-100: @theme-secondary-color-100;
      base-color: @theme-secondary-base-color;
      base-light-color: @theme-secondary-color-80;
    };
    @gradients: {
      dark: @theme-secondary-bg-gradient-dark;
      dark-text-color: @theme-secondary-color-99;
      light: @theme-secondary-bg-gradient-light;
    };
  };
}

@theme-prefix: cr-ct;

.@{theme-prefix}-b {
  border: 1px solid @theme-secondary-base-color;
}

.@{theme-prefix}-b-2 {
  border: 2px solid @theme-secondary-base-color;
}

.@{theme-prefix}-b-3 {
  border: 3px solid @theme-secondary-base-color;
}

.@{theme-prefix}-b-4 {
  border: 4px solid @theme-secondary-base-color;
}

.@{theme-prefix}-b-5 {
  border: 5px solid @theme-secondary-base-color;
}

.make-text-colors(@colors) {
  each(@colors, {
    .@{theme-prefix}-text-@{key} {
      color: @value !important;
    }
  });
}

.make-bg-colors(@colors) {
  each(@colors, {
    .@{theme-prefix}-bg-color-@{key} {
      background-color: @value !important;
    }
  });
}

.make-bg-gradients(@gradients) {
  each(@gradients, {
    .@{theme-prefix}-bg-gradient-@{key} {
      background-image: @value !important;
    }
  });
}

.make-border-colors(@colors) {
  each(@colors, {
    .@{theme-prefix}-b-@{key} {
      border-color: @value !important;
    }
  });
}

.@{theme-prefix}-theme-1 {
  .make-text-colors(@themes[@theme-1][@colors]);
  .make-bg-colors(@themes[@theme-1][@colors]);
  .make-bg-gradients(@themes[@theme-1][@gradients]);
  .make-border-colors(@themes[@theme-1][@colors]);
}

.@{theme-prefix}-theme-2 {
  .make-text-colors(@themes[@theme-2][@colors]);
  .make-bg-colors(@themes[@theme-2][@colors]);
  .make-bg-gradients(@themes[@theme-2][@gradients]);
  .make-border-colors(@themes[@theme-2][@colors]);
}

.@{theme-prefix}-theme-3 {
  .make-text-colors(@themes[@theme-3][@colors]);
  .make-bg-colors(@themes[@theme-3][@colors]);
  .make-bg-gradients(@themes[@theme-3][@gradients]);
  .make-border-colors(@themes[@theme-3][@colors]);
}

@base-font-size: 16px;
@base-line-height: 1.5;
@base-heading-font-weight: 600;
@base-heading-1-font-size: 50px;
@base-heading-2-font-size: 32px;
@base-heading-3-font-size: 24px;
@base-heading-4-font-size: 20px;
@base-heading-5-font-size: 16px;
@base-heading-6-font-size: 14px;
@base-heading-1-line-height: 1.2;
@base-heading-2-line-height: 1.3;
@base-heading-3-line-height: 1.4;
@base-heading-4-line-height: 1.5;
@base-heading-5-line-height: 1.6;
@base-heading-6-line-height: 1.7;
@base-heading-1-margin-bottom: 30px;
@base-heading-2-margin-bottom: 20px;
@base-heading-3-margin-bottom: 15px;
@base-heading-4-margin-bottom: 10px;
@base-heading-5-margin-bottom: 5px;
@base-heading-6-margin-bottom: 5px;
@base-paragraph-margin-bottom: 24px;

.cr-ct-h1 {
  font-size: @base-heading-1-font-size !important;
  line-height: @base-heading-1-line-height !important;
  margin-bottom: @base-heading-1-margin-bottom !important;
}

.cr-ct-h2 {
  font-size: @base-heading-2-font-size !important;
  line-height: @base-heading-2-line-height !important;
  margin-bottom: @base-heading-2-margin-bottom !important;
}

.cr-ct-h3 {
  font-size: @base-heading-3-font-size !important;
  line-height: @base-heading-3-line-height !important;
  margin-bottom: @base-heading-3-margin-bottom !important;
}

.cr-ct-h4 {
  font-size: @base-heading-4-font-size !important;
  line-height: @base-heading-4-line-height !important;
  margin-bottom: @base-heading-4-margin-bottom !important;
}

.cr-ct-h5 {
  font-size: @base-heading-5-font-size !important;
  line-height: @base-heading-5-line-height !important;
  margin-bottom: @base-heading-5-margin-bottom !important;
}

.cr-ct-h6 {
  font-size: @base-heading-6-font-size !important;
  line-height: @base-heading-6-line-height !important;
  margin-bottom: @base-heading-6-margin-bottom !important;
}

.cr-ct-p {
  margin-bottom: @base-paragraph-margin-bottom;
}
