@mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@site-max-width: 1200px;
@site-mobile-width: 800px;

@default-accent-colour: #9475b2;
@default-background-colour: #fbeeff;
@default-text-colour: #000;
@default-header-text-colour: #306;
@default-gradient-start: #c2affe;

:root {
    --site-max-width: @site-max-width;
    --site-background-meta: no-repeat center / cover fixed;
    --site-background-image: initial;

    --user-colour: inherit;
    --accent-colour: @default-accent-colour;
    --text-colour: @default-text-colour;
    --text-colour-inverted: color(#fff - @default-text-colour);
    --text-colour-header: @default-header-text-colour;
    --background-colour: @default-background-colour;
    --background-colour-translucent: fade(@default-background-colour, 90%);
    --gradient-start: @default-gradient-start; // deprecate this in favour of --accent-colour at some point
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    background: var(--site-background-meta);
    background-image: var(--site-background-image);
    background-color: var(--background-colour);
    font: 12px/20px @mio-font-regular;
    color: var(--text-colour);

    &__wrapper {
        max-width: var(--site-max-width);
        width: 100%;
        margin: 0 auto;
        flex: 1 0 auto;
    }

    &--default {
        --site-background-meta: repeat;
        --site-background-image: url('https://mikoto.misaka.nl/i/cloudss.png');
        background-blend-mode: multiply;

        background-color: var(--accent-colour);
        --gradient-start: var(--accent-colour);
    }

    &--legacy {
        --background-color: #fbeeff;
    }

    &--bg-blend {
        background-blend-mode: multiply;
    }

    /*&--bg-slide {
    }*/

    &--bg-cover {
        background-repeat: no-repeat;
    }

    &--bg-stretch {
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    &--bg-tile {
        background-repeat: repeat;
    }
}

// Input elements
@import "classes/input/button";
@import "classes/input/select";
@import "classes/input/text";
@import "classes/input/textarea";
@import "classes/input/upload";

// Base styles
@import "classes/avatar";
@import "classes/container";
@import "classes/flag";
@import "classes/navigation";
@import "classes/pagination";
@import "classes/warning";

// Specific styles
@import "classes/footer";
@import "classes/header";
@import "classes/index";
@import "classes/permissions";
@import "classes/auth";
@import "classes/chat-quote";

// Manage
@import "classes/manage/manage";
@import "classes/manage/navigation";

// Profile
@import "classes/profile/profile";
@import "classes/profile/header";
@import "classes/profile/accounts";
@import "classes/profile/about";
@import "classes/profile/guidelines";

// Changelog
@import "classes/changelog";
@import "classes/changelog-actions-tags";

// Settings
@import "classes/settings/description";
@import "classes/settings/errors";
@import "classes/settings/pagination";
@import "classes/settings/account";
@import "classes/settings/images";
@import "classes/settings/avatar";
@import "classes/settings/log";
@import "classes/settings/login-history";
@import "classes/settings/sessions";
@import "classes/settings/about";

// News
@import "classes/news/container";
@import "classes/news/list";
@import "classes/news/preview";
@import "classes/news/sidebar";
@import "classes/news/post"; // post needs to be able to override sidebar

// Forums
@import "classes/forum/actions";
@import "classes/forum/categories";
@import "classes/forum/category";
@import "classes/forum/pagination";
@import "classes/forum/post";
@import "classes/forum/posting";
@import "classes/forum/topic";
@import "classes/forum/topics";

// User stuff
@import "classes/usercard";
@import "classes/userlist";

// Comments
@import "classes/comment"; // entries
@import "classes/comments"; // listing