:root {
  /* Typography */
  --primary-font: "CivilPremium", sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi: 600;
  --font-bold: 700;

  /* Colors - Brand */
  --primary-color: #053849;
  --primary-color-100: #F2FFFE;
  --primary-color-200: #E5FCFA;
  --primary-color-300: #CEF9F5;
  --primary-color-400: #00B199;
  --primary-color-500: #0B6D73;

  /* Colors - Grayscale */
  --white-color: #ffffff;
  --gray-100-color: #f9f8f7;
  --gray-200-color: #e8e6e1;
  --gray-300-color: #b5ae9e;
  --gray-400-color: #9A9A9A;
  --gray-500-color: #6b6b6b;
  --gray-600-color: #7E7C78;
  --gray-700-color: #686662;
  --gray-800-color: #48474c;
  --gray-900-color: #262727;
  --black-color: #0b0903;  

  /* Colors - Other */
  --success-color: #a3c237;
  --danger-color: #c23747;

  /* Globals */
  --global-spacing: -0.015625rem;
  --global-transition: all 0.2s ease-in-out;
  --global-border: 0.0625rem solid var(--gray-200-color);  
  --global-shadow: 0 0.75rem 3rem #ada59333;
  --global-overlay: rgba(0, 0, 0, 0.45);

  /* Others */
}