// **-----
// STRUCTURE
// **-----

$phi: 1.618;

$base_font_size: 20;
$px: ( 1 / $base_font_size ) * 1rem;

// Post and widget column settings
$readable_width: 40rem;
$default_gutter: $phi * 1.25rem;
// 0.3 means sidebar will be 30% width
$small_col: 0;

// DEFAULT _S "STRUCTURE" VARS
$size__site-main: 100%;
$size__site-sidebar: percentage($small_col);
// /end



// Padding settings
$default_h_padding: $phi * $phi * $phi * 1rem;
$default_v_padding: $default_h_padding;

// Posts and widgets horizontal padding
$post_l_padding: $default_h_padding;
$post_r_padding: $post_l_padding;
$widget_l_padding: $default_h_padding / $phi;
$widget_r_padding: $widget_l_padding;

// Posts and widgets vertical padding
$post_t_padding: $default_h_padding / $phi;
$post_b_padding: $post_t_padding;
$widget_t_padding: $default_h_padding / ( $phi * $phi );
$widget_b_padding: $widget_t_padding;



@function total_site_width() {
    // Figure out how many overall rems wide the posts should be, allowing for a readabiliity optimized width on text plus left and right padding
    $total_post_width_rem: $readable_width + $post_l_padding + $post_r_padding;
    
    // Figure out how many rems wide the widgets should be in order to have a golden ratio relationship with the posts
    $sidebar_width_rem: (( $total_post_width_rem / (1 - $small_col) ) + $widget_l_padding + $widget_r_padding ) * $small_col;
    
    // Add the two together in order to determine how many rems wide the total site wrapper should be
    @return $total_post_width_rem + $sidebar_width_rem + $default_gutter;
    // @return $total_post_width_rem;
}

// **-----
// TYPOGRAPHY
// **-----

// Now enqueuing fonts in functions.php
// @import url("//fonts.googleapis.com/css?family=Khula:300,400,600,700,800"); 
// @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");


// DEFAULT _S "TYPOGRAPHY" VARS
// font-stack from cssfontstack.com
$font__main: Khula, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
$font__pre: "Courier 10 Pitch", Courier, monospace;
$font__line-height-body: $phi*1em;
$font__line-height-pre: $phi*1em;
// /end

$htag_lineheight: 1.313em;
$htag_family: $font__main;
$htag_weight: 600;

// H tag font sizes 1 through 6
$htag_sizes: 3, 2.25, 1.5, 1.313, 1.125, 1;

// H tag vertical margins 1 through 6
$htag_vmargins: 0.563, 0.625, 1.313, 1.313, 1.313, 0.75;




// **-----
// COLORS
// **-----

// DEFAULT _S "COLORS" VARS
$color__background-body: #f1f1f3; //#f1f1f1; //radial-gradient(ellipse farthest-side at 100% 100%, #F8FFF3 10%, #85D8CE 50%, #085078 120%);
$color__background-screen: #f1f1f3; //#f1f1f1;
$color__background-hr: #ccc;
//$color__background-button: #e6e6e6; // linear-gradient(to bottom right, #00ACDF, #0085B9, #8EDCD2);
$color__background-pre: #f7faff; //#eee;
$color__background-ins: #fff9c0;

$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;
$color__link: #00ACDF;  // #1BB3D7; unilang color 
$color__link-visited: darken($color__link, 10%);
$color__link-hover: darken($color__link, 5%); // darker rgba(40, 57, 77, 1);
$color__text-main: #404040;

$color__border-button: #ccc #ccc #bbb;
$color__border-button-hover: #ccc #bbb #aaa;
$color__border-button-focus: #aaa #bbb #bbb;
$color__border-input: #ccc;
$color__border-abbr: #666;
// /end


// custom colors
$color__background-header: linear-gradient(#FFF, #FBFBFC); //#fafafb; //#f9f9f9;
$color__background-button: linear-gradient(#FFF, #FBFBFC);
$color__background-button-hover: linear-gradient(#FCFCFD, #F3F4F5);

$color__box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
$color__header-box-shadow: 0px 1px 3px rgba(190, 190, 190, 0.5);
$color__site-title-shadow: 0 2px 0 rgba( 0, 91, 103, 0.15 );

$color__light-border: #e2e2e5; //gainsboro;
$color__lighter-border: #f2f2f5;

$color__background-main-panel: #fff;
$color__border-main-panel: transparent;

$color__background-sub-panel: #fafafb; //#f9f9f9;
$color__border-sub-panel: white;
$color__text-sub-panel: #9e9e9e;

$color__entry_highlight: silver;

$color__background-blue: #1A3547;
$color__text-on-blue: #B5CBD8;