@use 'sass:color';

$dark-theme: false !default;

$mobile-width: 1080px;

// Dynamic values depending of the screen width.
@media (min-width: calc($mobile-width + 1px)) {
    :root {
        --margin: 5px;
        --title-font-size: 180%;
        --logo-size: 50px;
    }
}

@media (max-width: $mobile-width) {
    :root {
        --margin: 3px;
        --title-font-size: 130%;
        --logo-size: 40px;
    }
}

$color-1: #B29B89;
$color-2: #89B29B;
$color-3: #9B89B2;
$color-highlight: #cf2d2dff;

$text-color: color.adjust($color-1, $lightness: -30%);
$text-highlight: color.adjust($color-1, $lightness: +30%);
$text-dimished: color.adjust($color-1, $lightness: -15%, $saturation: -15%);

$link-color: color.adjust($color-3, $lightness: -25%);
$link-hover-color: color.adjust($color-3, $lightness: +20%);

@if $dark-theme {
    $color-highlight: color.adjust($color-highlight, $lightness: +10%);

    $text-color: color.adjust($color-1, $lightness: -10%);
    $text-highlight: color.adjust($color-1, $lightness: +10%);
    $text-dimished: color.adjust($color-1, $lightness: -20%, $saturation: -15%);

    $link-color: color.adjust($color-3, $lightness: -5%);
    $link-hover-color: color.adjust($color-3, $lightness: +10%);

    $color-1: color.adjust($color-1, $lightness: -47%);
    $color-2: color.adjust($color-2, $lightness: -47%);
    $color-3: color.adjust($color-3, $lightness: -50%);
}