:root {
  /* Colors */
  --color-background-page: #F4EFEA;    
  --color-background-header: #ECE3D8;    
  --color-text-primary: #1D2D44;          
  --color-text-body: #2C2C2C;         
  --color-accent-primary: #C49A6C;      
  --color-accent-link: #53A2BE;          
  --color-accent-link-hover: #E76D83; 
  --color-caption: #666;    

    /* Fonts (body) */
  --font-family: "Open Sans", sans-serif;
  --font-weight: 2;
  --font-size: 17px;
  --font-style: normal;

   /* Fonts (display) */
  --font-family-display: "PT Serif", serif;
  --font-weight-display: 700;
  --font-style-display: normal;
  --font-size-display: 20px;

  --border-radius-property-card: 12px;

  --page-grids: 5;

  --margins: 5rem;

}

body.dark-mode {
  --color-background-page: #1D2D44;    
  --color-background-header: #2C2C2C ;    
  --color-text-primary: #F4EFEA;          
  
  --color-text-body: black;         
  --color-accent-primary: #C49A6C;      
  --color-accent-link: #53A2BE;          
  --color-accent-link-hover: #E76D83; 
  --color-caption: #666;  
}

html.dark-mode {
  --color-background-page: #1D2D44;    
}