/**
 * Black theme for reveal.js. This is the opposite of the 'white' theme.
 *
 * By Hakim El Hattab, http://hakim.se
 */

@use "@hope/config";

@import 'template/mixins';
@import 'template/settings';
@import 'template/theme';

$backgroundColor: #191919;

$mainColor: #fff;
$headingColor: #fff;

$mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: lighten($linkColor, 15%);
$selectionBackgroundColor: lighten($linkColor, 25%);

$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1em;

.reveal[theme='black'] {
  @include light-bg-text-color(#222);
}

@include theme("[data-theme='black']");

#{config.$darkSelector} {
  @include theme("[data-theme='auto']");
}