// Global Variable in all over the site
// == Colors
@import "mixins";

$brand-color: var(--brand-color); //#0088ff; 	//#ff573d; // The Primary Color

$dark-brand-color: var(--dark-brand-color); //#006dcc; 		//darken( $brand-color, 10% ); // Used for Hover state for the items with background/text color of $brand-color


$bright: var(--bright-color); // #ffffff; 	//color-contrast($brand-color); // Used as text color of the items that have $brand-color or $dark-brand-color


// Light Mode Colors
$bg-color: #F7F7F7; // Background Color
$base-color: var(--base-color); //#2c2f34; 	// #555555; // Main Text Color
$base-light-color: $bg-color;    // Used for some Light Backgrounds
$post-meta-color: #666;
$content-bg-color: #fff;
$light-dark-base-color: #cccccc;
$light-dark-bg: #27292d;
$dark-color: #2c2f34;
$light-darker-bg: #1f2024;
$secondry-text-color: #666;


// Dark Mode colors
//$bg-color: #1f2024; // Background Color
//$base-color: #ffffff; //#2c2f34; 	// #555555; // Main Text Color
//$base-light-color: $bg-color;    // Used for some Light Backgrounds
//$content-bg-color: #27292d;
//$post-meta-color: red;
//$light-dark-base-color: #cccccc;
//$light-dark-bg: #27292d;
//$dark-color: #2c2f34;
//$light-darker-bg: #1f2024;
//$secondry-text-color: #cccccc;





$dark-base-color: #cccccc;
$dark-bg: #27292d;
$darker-bg: #1f2024;
$darker-bg-more: #131416;




$top-nav-dark-bg: #2c2e32;


// Notifications Messages Colors
$success_color: #89ba16;
$danger_color:  #e74c3c;
$info_color:    #3498db;
$warning_color: #f39c12;


// social media Colors
$facebook-color:    #4080FF;
$twitter-color:     #000;
$google-color:      #eb5e4c;
$pinterest-color:   #e13138;
$linkedin-color:    #238cc8;
$instagram-color:   #c13584;
$vimeo-color:       #35c6ea;
$dribbble-color:    #f7659c;
$youtube-color:     #ef4e41;
$soundcloud-color:  #ff7e30;
$flickr-color:      #ff48a3;
$github-color:      #3f91cb;
$behance-color:     #1879fd;
$rss-color:         #faa33d;
$skype-color:       #00aff0;
$reddit-color:      #ff4500;
$tumblr-color:      #35465c;
$wordpress-color:   #21759b;
$yelp-color:        #af0606;
$lastfm-color:      #d51007;
$xing-color:        #026466;
$deviantart-color:  #05cc47;
$apple-color:       #333333;
$foursquare-color:  #f94877;
$paypal-color:      #003087;
$spotify-color:     #2ebd59;
$googleplay-color:  #689F38;
$px500-color:       #0099e5;
$vk-color:          #45668e;
$pocket-color:      #ef4056;
$bitbucket-color:   #205081;
$mixcloud-color:    #589fC3;
$medium-color:      #4bad31;
$twitch-color:      #6441a5;
$viadeo-color:      #f07355;
$envato-color:      #82b641;
$steam-color:       #111111;
$goodreads-color:   #A06E0A;
$snapchat-color:    #e8e600;
$whatsapp-color:    #43d854;
$line-color:        #00c300;
$messenger-color:   #0078ff;
$telegram-color:    #0088cc;
$viber-color:       #773ead;
$tiktok-color:      #EE1D52;
$tripadvisor-color: #448040;
$patreon-color:     #000000;
$flipboard-color:   #f52828;
$buymeacoffee-color: #ffdd00;
$odnoklassniki-color: #ee8208;



// borders
$base-border-opic-color:     #e6e6e6;
$base-border-color:          rgba(0,0,0,0.1);
$base-border-color-in-white: rgba(255,255,255,0.1);

$base-border:                1px solid $base-border-color;
$base-border-opic:           1px solid $base-border-opic-color;
$base-border-in-white:       1px solid $base-border-color-in-white;
$primary-border:             1px solid $base-border-color;
$title-border-bottom:        2px solid $base-border-color;
$base-border-radius:         2px !default;


// Tooltips:: bootstrap
$tooltip-max-width:   200px !default;
$tooltip-color:       #fff !default;
$tooltip-bg:          #000 !default;
$tooltip-opacity:     .9 !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
$zindex-tooltip:      1070 !default;


// Typography:: bootstrap
$font-family-sans-serif:    "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:         Georgia, "Times New Roman", Times, serif !default;

// Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`
$font-family-monospace:     Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:          $font-family-sans-serif !default;

$font-size-base:            13px !default;
$font-size-large:           ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:           ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1:              floor(($font-size-base * 3.2)) !default; // ~45px
$font-size-h2:              floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:              ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:              ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:              $font-size-base !default;
$font-size-h6:              ceil(($font-size-base * 0.85)) !default; // ~12px


// Media queries breakpoints

// Extra small screen / phone
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-min-1:            ($screen-xs-min - 1) !default;
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;


// Grid system
// Number of columns in the grid.
$grid-columns:              12 !default;
// Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;
// Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
// Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;


// Container sizes
// Small screen / tablet
$container-tablet:             100% !default;
// For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;
// Medium screen / desktop
$container-desktop:            100% !default;
// For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;
// Large screen / wide desktop
$container-large-desktop:      (1170px + $grid-gutter-width) !default;
// For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;
