/* ================================================================== */
/* THEME: Teal
 */
@import 'functions';
@import 'fonts_teal';
@import 'icon_dark_on_light';

// -------------------------------------------------------------------
// VARIABLES

$verge-bg: hsl(180, 70%, 40%);
$verge-fg: set-fg($verge-bg);
$verge-border: hsl(180, 100%, 10%);
$verge-grad: adjust-hue(darken($verge-bg, 15%), -15);
$button-bg: adjust-hue(darken($verge-bg, 15%), -15);
$button-fg: set-fg($button-bg);
$button-border: $verge-border;
$main-bg: hsl(180, 40%, 60%);
$main-fg: set-fg($main-bg);
$curr-bg: $main-bg;
$link-fg: set-link($main-bg);
$link-visited: set-visited($main-bg);
$verge-link-fg: set-link($verge-bg);
$verge-link-visited: set-visited($verge-bg);

/* ================================================================== */
/* General */
.verge {
    color: $verge-fg;
    background: $verge-bg;
    border-color: $verge-border;
}

header,
footer {
    @extend .verge;
    background: linear-gradient($verge-bg, $verge-grad);
}

.side {
    @extend .verge;
    background: linear-gradient(to right, $verge-grad, $verge-bg);
}

body {
	color: $main-fg;
	background: $main-bg;
}

@include many-links($link-fg, $link-visited, $verge-link-fg, $verge-link-visited);
@include fancy($verge-fg, $verge-bg, "silver3.jpg");
@include make-buttons;

header nav li {
	border-color: $button-border;
}
header nav .selflink,
header nav em,
header nav .current a {
	background-color: $curr-bg;
}

