:root {
  /* Color */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-white-rgb: 255, 255, 255;
  --c-gray-900: #101828;
  --c-gray-800: #212121;
  --c-gray-700: #344054;
  --c-gray-600: #475467;
  --c-gray-500: #686b6b;
  --c-gray-400: #a3a3a3;
  --c-gray-300: #bcbcbc;
  --c-gray-200: #eaecf0;
  --c-gray-100: #f2f4f7;
  --c-gray-50: #eee;
  --c-gray-25: #fafafa;
  --c-info-200: #4172c5;
  --c-info-100: #4787f3;
  --c-info-50: #91b6f4;
  --c-info-25: #f5f9ff;
  --c-error-200: #d92d20;
  --c-error-100: #f93232;
  --c-error-50: #ffa4a3;
  --c-error-25: #ffe6e3;
  --c-warning-200: #d6900a;
  --c-warning-100: #ffb82e;
  --c-warning-50: #ffe19a;
  --c-warning-25: #fff7e3;
  --c-success-200: #109356;
  --c-success-100: #12b76a;
  --c-success-50: #a6f4c5;
  --c-success-25: #f6fef9;

  --c-primary-300: #ac172b;
  --c-primary-200: #ed1c2b;
  --c-primary-200-rgb: 237, 28, 43;

  --c-secondary-200: #003865;
  --c-secondary-200-rgb: 0, 56, 101;
  --c-secondary-100: #0093b2;
  --c-secondary-100-rgb: 0, 147, 178;
  --c-secondary-50: #9bd1dd;
  --c-secondary-50-rgb: 155, 209, 221;

  --c-facebook: #1877f2;
  --c-instagram: #845ddb;
  --c-twitter: #00acee;
  --c-youtube: #c4302b;
  --c-linkedin: #0077b5;
  --c-whatsapp: #25d366;
  --c-viber: #675ca8;

  --c-pdf: #bd0f17;
  --c-word: #1b56b4;
  --c-excel: #18753f;
  --c-powerpoint: #bc3922;
  --c-archive: #fdd977;
  /* Font family */
  --ff-primary: Gotham;
  --ff-secondary: Georgia;
  /* Font size */
  --fs-2xs: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 30px;
  --fs-3xl: 40px;
  --fs-4xl: 52px;
  /* Line height */
  --lh-xs: 110%;
  --lh-sm: 120%;
  --lh-md: 150%;
  /* Border radius */
  --br-sm: 4px;
  --br-tooltip: 8px;
  --br-md: 10px;
  --br-lg: 20px;
  --br-half: 50%;
  /* Form */
  --form-height: 60px;
  --form-height-small: 46px;
  --form-font-size: var(--fs-md);
  --form-font-size-small: var(--fs-sm);
  /* Button */
  --button-padding-x: 24px;
  --button-padding-x-small: 22px;
  --button-padding-alt: 20px;
  --button-border: 1px solid var(--c-primary-200);
  --button-icon-margin: 10px;
  --button-outline-size: 1px;
  --button-outline-offset: 2px;
  /* Input */
  --input-placeholder: var(--c-gray-400);
  --input-background: var(--c-white);
  --input-background-hover: var(--c-white);
  --input-background-active: var(--c-white);
  --input-background-disabled: var(--c-gray-50);
  --input-border: 1px solid var(--c-gray-300);
  --input-border-hover: var(--c-primary-200);
  --input-border-active: var(--c-primary-200);
  --input-border-disabled: var(--c-gray-100);
  --input-border-radius: 0;
  /* Input Text */
  --input-text-bottom-border: 1px solid var(--c-gray-300);
  /* Input Checker */
  --checker-size-sm: 16px;
  --checker-size-md: 20px;
  --checker-color: var(--primary-200);
  --checker-color-disabled: var(--c-gray-200);
  --checkbox-br-sm: 4px;
  --checkbox-br-md: 6px;
  /* Spacing */
  --tag-spacing: 1.4em;
  @media (max-width: 1440px) {
    /* Font size */
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 26px;
    --fs-3xl: 36px;
    --fs-4xl: 46px;
    /* Form */
    --form-height: 50px;
    /* Button */
    --button-padding-x: 20px;
  }
  @media (max-width: 1366px) {
    /* Font size */
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 42px;
  }
  @media (max-width: 1024px) {
    /* Font size */
    --fs-lg: 14px;
    --fs-xl: 16px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --fs-4xl: 38px;
  }
  @media (max-width: 768px) {
    /* Font size */
    --fs-2xl: 20px;
    --fs-3xl: 24px;
    --fs-4xl: 30px;
  }
  @media (max-width: 576px) {
    /* Font size */
    --fs-2xl: 18px;
    --fs-3xl: 22px;
    --fs-4xl: 28px;
  }
}