svthalia/concrexit

// Font and Styles
$primary-font: 'Open Sans', sans-serif;
$header-font: 'Oswald', sans-serif;
$regular: 400;
$bold: 700;
$light: 300;
$letter-spacing: 0px;
$fa-font-path: "../fonts";

// Theme Colors
$magenta: #E62272;
$magenta-shade: #CF1760;
$black: #111111;
$darkdark-grey: #212121;
$dark-grey: #444444;
$grey: #616161;
$light-grey: #dddddd;
$lightlight-grey: #f7f7f7;
$white: #ffffff;
$preset-transparent: RGBA(235, 88, 111, 0.7);

$green: #55c025;
$green-shade: #52a425;
$blue: #1e9ae6;
$blue-shade: #1e83cf;
$yellow: #ffc107;
$yellow-shade: #e0a800;
$red: #e62a17;
$red-shade: #ce2816;

:root {
    --background-color: #{$white};
    --background-shade: #{$light-grey};
    --background-shade-light: #{$lightlight-grey};
    --navbar-background-color: #{$white};

    --card-background: #{$lightlight-grey};
    --card-background-contrast: #{$black};
    --card-background-hover: #{$light-grey};
    --card-background-hover-contrast: #{$magenta};

    --list-background: #{$lightlight-grey};
    --list-background-contrast: #{$black};
    --list-background-hover: #{$light-grey};
    --list-background-hover-contrast: #{$magenta};

    --banner-background: #{$light-grey};

    --form-background: #{$white};
    --form-background-disabled: #{$light-grey};
    --form-border: #{$black};
    --form-text: #{$dark-grey};

    --title-color: #{$black};
    --sub-title-color: #{$dark-grey};
    --text-color: #{$dark-grey};
    --nav-link-color: #{$black};

    --footer-text-color: #{$white};
    --footer-text-color-hover: #{$lightlight-grey};

    --primary: #{$magenta};
    --primary-rgb: #{red($magenta), green($magenta), blue($magenta)};
    --primary-hover: #{$magenta-shade};
    --primary-contrast: #{$white};
    --primary-contrast-hover: #{$light-grey};

    --secondary: #{$black};
    --secondary-hover: #{$darkdark-grey};
    --secondary-contrast: #{$white};

    --success: #{$green};
    --success-hover: #{$green-shade};
    --success-contrast: #{$white};
    --info: #{$blue};
    --info-hover: #{$blue-shade};
    --info-contrast: #{$white};
    --warning: #{$yellow};
    --warning-hover: #{$yellow-shade};
    --warning-contrast: #{$white};
    --danger: #{$red};
    --danger-hover: #{$red-shade};
    --danger-contrast: #{$white};
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #{$black};
        --background-shade: #{$dark-grey};
        --background-shade-light: #{$darkdark-grey};
        --navbar-background-color: #{$black};

        --card-background: #{$darkdark-grey};
        --card-background-contrast: #{$white};
        --card-background-hover: #{$dark-grey};
        --card-background-hover-contrast: #{$white};

        --list-background: #{$darkdark-grey};
        --list-background-contrast: #{$white};
        --list-background-hover: #{$dark-grey};
        --list-background-hover-contrast: #{$white};

        --banner-background: #{$dark-grey};

        --form-background: #{$black};
        --form-background-disabled: #{$darkdark-grey};
        --form-border: #{$white};
        --form-text: #{$light-grey};

        --title-color: #{$white};
        --sub-title-color: #{$lightlight-grey};
        --text-color: #{$light-grey};
        --nav-link-color: #{$white};

        --footer-text-color: #{$white};
        --footer-text-color-hover: #{$lightlight-grey};

        --secondary: #{$light-grey};
        --secondary-hover: #{$lightlight-grey};
        --secondary-contrast: #{$black};
    }
}