/*------------------------------------*\
    			SETTINGS
\*------------------------------------*/

/* @group Colors */

// CSS2 
:root{
    // Font Families
    --epcl-font-family: "Jost", "Source Sans Pro", serif;
    --epcl-title-font-family: "Outfit", sans-serif;
    --epcl-title-font-weight: 800;
    --epcl-sidebar-title-font-family: "Outfit", sans-serif;
    --epcl-sidebar-title-font-weight: 800;
    --epcl-font-size: 16px;
    
    // Colors
    --epcl-main-color: #FF4C60;
    --epcl-secondary-color: #FED267;
    --epcl-titles-color: #333;
    --epcl-text-color: #353A44;
    --epcl-black-color: #333;
    --epcl-background-color: #54CBCA;
    --epcl-content-background-color: #FFFACD;
    --epcl-boxes-border-radius: 15px;
    --epcl-border-color: rgba(39, 39, 39, 0.75);
    --epcl-boxes-shadow: 0px 0px 0px 0px #333;
    --epcl-small-shadow: 2px 2px 0px 0px #333; // Used on small images (like widgets or related articles)
    --epcl-medium-shadow: 4px 4px 0px 0px #333;
    --epcl-transition-bezier: cubic-bezier(.5,2.5,.7,.7);
}

/* @group Font Families */

$font-family: var(--epcl-font-family);
$font-weight: 400;
$font-size: var(--epcl-font-size); // General content font size
$line-height: 1.8;

$font-size-editor: 16px; // Single Content font size
$line-height-editor: 2;
$font-weight-editor: 400;

$title-font-family: var(--epcl-title-font-family);
$title-font-weight: var(--epcl-title-font-weight);
$title-font-size: 30px;

$sidebar-title-font-family: var(--epcl-sidebar-title-font-family);
$sidebar-title-font-weight: var(--epcl-sidebar-title-font-weight);

/* @end */

$main-color: var(--epcl-main-color);
$secondary-color: var(--epcl-secondary-color);
$black: var(--epcl-black-color); 
$titles-color: var(--epcl-titles-color);

// Content

$background-color: var(--epcl-background-color); // Body background color FAFAFB FDFDFD F9F9FE
$boxes-bg-color: var(--epcl-content-background-color);
$text-color: var(--epcl-text-color); // Primary text color
$meta-color: #424851;
$white: #fff;
$light-gray: #555;
$border-color: var(--epcl-border-color);
$input-bg-color: #fff;

$border-radius: 25px;
$small-border-radius: 8px;
$medium-border-radius: 15px;
$large-border-radius: 100px;
$boxes-border-radius: var(--epcl-boxes-border-radius);
$border-radius-sections: 0px;

// Decorations

$boxes-shadow: var(--epcl-boxes-shadow);
$small-shadow: var(--epcl-small-shadow); // Used on small images (like widgets or related articles)
$medium-shadow: var(--epcl-medium-shadow);
$large-shadow: 0 3px 12px -1px rgba(7,10,25, 0.1), 0 22px 27px -30px rgba(7,10,25, 0.1); // Used on Large Containers (boxes, single article, etc)
$main-shadow: 0 3px 12px -1px rgba(7,10,25, 0.1), 0 22px 27px -20px rgba(7,10,25, 0.1);

// Social Colors
// Note: network-bg-color will be used as background for social buttons, using a lighter color is recommended to prevent an opaque design.
$social-lighten: 0%;

$twitter-color: #1DA1F2;
$twitter-bg-color: lighten($twitter-color, $social-lighten);
$instagram-color: #EF00A2;
$instagram-bg-color: lighten($instagram-color, $social-lighten);
$facebook-color: #175BEB;
$facebook-bg-color: lighten($facebook-color, $social-lighten);
$linkedin-color: #0077b5;
$linkedin-bg-color: lighten($linkedin-color, $social-lighten);
$pinterest-color: #EE3E52;
$pinterest-bg-color: lighten($pinterest-color, $social-lighten);
$dribbble-color: #D97AA6;
$dribbble-bg-color: lighten($dribbble-color, $social-lighten);
$tumblr-color: #5F7990;
$tumblr-bg-color: lighten($tumblr-color, $social-lighten);
$youtube-color: #fb5555;
$youtube-bg-color: lighten($youtube-color, $social-lighten);
$flickr-color: #EF3998;
$flickr-bg-color: lighten($flickr-color, $social-lighten);
$twitch-color: #8551e6;
$twitch-bg-color: lighten($twitch-color, $social-lighten);
$vk-color: #6299dc;
$vk-bg-color: lighten($vk-color, $social-lighten);
$telegram-color: #0088cc;
$telegram-bg-color: lighten($telegram-color, $social-lighten);
$rss-color: #f59f23;
$rss-bg-color: lighten($rss-color, $social-lighten);
$tiktok-color: #69c9d0;
$tiktok-bg-color: lighten($tiktok-color, $social-lighten);
$whatsapp-color: #1FB381;
$whatsapp-bg-color: lighten($whatsapp-color, $social-lighten);

$lighten: 9%; //Lighten amount for hovers and overlays, example: subscribe input box background
$darken: 4%; //Darken amount for hovers and overlays, example: search box background

/* @end */

/* @group Effects speed */

$transition-time: 300ms;
$transition-method: ease; //General transition method
$transition-time-bezier: 300ms;
$transition-bezier: var(--epcl-transition-bezier); // Only for elemtents with shadow effect

/* @end */

/* @group Content Width and Margins */

$editor-width: 739px;
$editor-base-unit: 32px; // Space between paragraphs and titles (post content)
$section-padding: 70px; // Padding top and bottom for containers, example: sidebar widgets, suscribe form
$medium-section-padding: 50px;
$element-padding: 25px;

$grid-container: 1240px; // Max width for the theme
$grid-usmall: 600px;
$grid-small: 780px;
$grid-medium: 990px;
$grid-large: 1400px;
$grid-ularge: 1600px;
$grid-gap: 20px; // Space betweens grids elements

/* @end */

$assets_path: '..'; // Do not change