@charset "utf-8";

// Bootstrap variables
$screen-xs-max: 768px !default;

$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size:   16px;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;

$spacing-unit:     30px;

// Our variables
$text-color:            var(--text-color);
$background-color:      var(--background-color);
$brand-color:           var(--brand-color);
$brand-color-visited:   var(--brand-color-visited);
$pre-color:             var(--pre-color);
$code-color:            var(--code-color);
$code-bg-color:         var(--code-bg-color);
$code-border-color:     var(--code-border-color);
$thead-color:           var(--thead-color);
$table-lines-color:     var(--table-lines-color);
$table-even-color:      var(--table-even-color);
$grey-colour:           #828282;
$grey-colour-light:     lighten($grey-colour, 40%);
$grey-colour-dark:      darken($grey-colour, 25%);

// Light theme colors
$text-color-lt:          #444;
$background-color-lt:    #fdfdfd;
$brand-color-lt:         #2a7ae2;
$brand-color-visited-lt: #551A8B;
$pre-color-lt:           #333;
$code-bg-color-lt:       #eef;
$code-color-lt:          #c7254e;
$thead-color-lt:         #eeeeee;
$table-lines-color-lt:   #d2d2d2;
$table-even-color-lt:    #f7f7f7;

// Dark theme colors
$text-color-dt:          #f0f0f0;
$background-color-dt:    #353535;
$brand-color-dt:         #d2991d;
$brand-color-visited-dt: #9a7015;
$pre-color-dt:           #aeaeae;
$code-bg-color-dt:       #2a2a2a;
$code-color-dt:          #eb7f98;
$thead-color-dt:         #525252;
$table-lines-color-dt:   #aeaeae;
$table-even-color-dt:    #828282;

:root {
    --text-color:           #{$text-color-lt};
    --background-color:     #{$background-color-lt};
    --brand-color:          #{$brand-color-lt};
    --brand-color-visited:  #{$brand-color-visited-lt};
    --pre-color:            #{$pre-color-lt};
    --code-color:           #{$code-color-lt};
    --code-bg-color:        #{$code-bg-color-lt};
    --code-border-color:    #{$grey-colour-light};
    --thead-color:          #{$thead-color-lt};
    --table-lines-color:    #{$table-lines-color-lt};
    --table-even-color:     #{$table-even-color-lt};
}

@media(prefers-color-scheme: dark) {
    :root {
        --text-color:           #{$text-color-dt};
        --background-color:     #{$background-color-dt};
        --brand-color:          #{$brand-color-dt};
        --brand-color-visited:  #{$brand-color-visited-dt};
        --pre-color:            #{$pre-color-dt};
        --code-color:           #{$code-color-dt};
        --code-bg-color:        #{$code-bg-color-dt};
        --code-border-color:    #{$code-bg-color-dt};
        --thead-color:          #{$thead-color-dt};
        --table-lines-color:    #{$table-lines-color-dt};
        --table-even-color:     #{$table-even-color-dt};
    }
}

$on-palm:          600px;
$on-laptop:        800px;



// Using media queries with like this:
// @include media-query($palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }
@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}



// Import partials
@import
        "bootstrap-overrides",
        "base",
        "layout",
        "homepage"
;
