// Atoms
//
// Atoms are the abstract basic building blocks of matter.
// Applied to web interfaces, atoms are the HTML tags, such as a form label, an input or a button.
// They can’t be broken down any further.
//
// Styleguide 2.

// Buttons
//
// Buttons are tools that enable users to perform a task. Some tasks are more important than others, and creating effective buttons with the right combination of size, color, position and wording is required.
// Good design can subconsciously communicate priority to users. Using the right combination of these components buttons will guide the user through the tasks required to achieve the main purpose or use case of a website.
//
// Styleguide 2.1.
@import 'atoms/buttons';

// Icons
//
// Font Awesome is the main mechanism to add icons to our Shopify theme, however, sometimes SVG are used for specific contents.<br>
// Check the following document for implementation details: <a href="https://docs.google.com/document/d/1rrtYKijP2u_HxQ9dbIvYS0zHrRNe58TtKx7CWgHN2r0/edit?usp=sharing" target="_blank">Icons Guidelines</a>
//
// Markup:
// <i class="fal fa-chevron-left"></i>
// <i class="fal fa-chevron-right"></i>
// <i class="fal fa-search"></i>
// <i class="fab fa-instagram"></i>
// <i class="fab fa-facebook-f"></i>
// <i class="fab fa-youtube"></i>
//
// Styleguide 2.2


// Typography
//
// This sections refers to the text that appears within a user interface. Users rarely read every word on a page.
// Thus, creating visual hierarchy is essential for users to understand the information. It also impacts how users scan a website.
// To make copy scannable you should provide good contrast between the different elements.
// This creates different focus points and guides the user through the content.
// For example, highlighting links and bolding important information creates scannable focus-points.
// Poor contrast results in users getting lost in the content and causes them to scan more slowly.
//
// Styleguide 2.3.
@import 'atoms/typography';

// Form Elements
//
// Web forms establish or enhance a relationship between the user and the organization.
// They establish a dialogue and, therefore, represent a two way communication between two parties. Form elements enable this communication.
//
// Styleguide 2.4.
@import 'atoms/form-elements';