@use "a_colours.css";

@use "a_footer";
@use "a_layouts";
@use "a_pane";
@use "a_quick_links";
@use "a_section_list";

:root {
    // 0: Base of an element. Example: the viewport class.
    //
    // The higher the integer, the lighter the colour, the higher
    // it should be visually, meaning more nested in the cascade.
    //
    // Odd numbers should be used as intermediate colours between the
    // fore and back elements.
    //
    // Eg. Current dropdown menu.

    --accent-red: #cb4c4cff;
    --accent-orange: #e18142ff;
    --accent-yellow: #e4d281ff;
    --accent-green: #c5e689ff;
    --accent-cyan: #a7edefff;
    --accent-blue: #5f62e2ff;
    --accent-indigo: #874ac0ff;
    --accent-purple: #a355d3ff;
    --accent-magenta: #df67dfff;
    --accent-pink: #ff9f9fff;

    --background-0: #130b21ff;
    --background-1: #170d28ff;
    --background-2: #231833ff;
    --background-3: #211635ff;
    --background-4: #2a223eff;

    --block-0: #0d0d0dff;
    --block-1: #1a1a1aff;
    --block-2: #272727ff;

    --highlight-hover: #944db6ff;

    --white-0: #bfbfbfff;
    --white-1: #d9d9d9ff;
    --white-2: #e5e5e5ff;
    --white-3: #f5f5f5ff;

    --font-size-generic: 1.85vh;

    --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
    --font-family-title: "Liberation Serif", Arial, Sans-Serif;

    --border-radius-small: calc(var(--border-radius-large) / 2);
    --border-radius-large: 1rem;
    --border-radius-leaf: var(--border-radius-small) var(--border-radius-large);

    --spacing-small: 0.75rem; // Previously: --spacing-horizontal
    --spacing-medium: 1rem; // Previously: --spacing-menu-gap
    --spacing-large: 1.5rem; // Previously: --margin-pane
    --spacing-thicc: calc(var(--spacing-large) * 4);

    --transition-fade: 0.4s ease-out;
    --transition-cut: none;

    --transform-scale-x: scaleX(1.15);
    --transform-scale-y: scaleY(1.15);

    font-size: var(--font-size-generic);
    color: var(--white-1);
}

body {
    display: grid;
    background-color: var(--background-0);
    grid-template-rows: min-content auto;
    width: 100%;
    overflow-x: hidden;

    // Adds a margin otherwise for some reason.
    margin: 0;

    .kao-banner {
        grid-area: banner;
    }
}

* {
    color-scheme: dark;
    box-sizing: border-box;

    /* outline: 1px solid red; */
}

h1 {
    font-size: 3.3vh;
}

h2 {
    font-size: 2.5vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-title);
}

p,
a,
li {
    font-family: var(--font-family-generic);
}

ul {
    list-style-type: disc;
}

pre {
    max-width: inherit;
    max-height: 30em;
    overflow: scroll;
}

blockquote {
    margin: 1rem;
    padding-left: 1rem;
    border-radius: var(--border-radius-small);
    border-left: 3px solid var(--accent-green);
    background-color: var(--background-4);
}

code {
    background-color: var(--background-4);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-radius: var(--border-radius-small);
}

// Mobile
@media (max-width: 600px) {
    :root {
        --spacing-large: var(--spacing-small);
    }

    body {
        grid-template-columns: none;
        grid-template-areas: "banner" "nav" "main" "spacer";

        // Compress spacings to maximize useable area.
        // padding: var(--spacing-small);
        justify-items: center;
    }

    .pane.spacer,
    .viewport_footer {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
    }
}

// Tablets and Intermediary
@media (min-width: 601px) and (max-width: 1023px) {
    body {
        grid-template-columns: min-content 1fr;
        grid-template-areas: "banner banner" "nav main" "spacer main";
    }
}

// Desktops and Laptops
@media (min-width: 1024px) {
    body {
        grid-template-columns: min-content 1fr min-content;
        grid-template-areas: "banner banner banner" "nav main spacer";
    }
}
