/* ordering standard: sizing/spacing > positioning > layout > visual > behaviour */
:root {
    /* Colors */
    --primary-color: #7158ea;
    --primar-color-rgb: 113, 88, 234;
    --secondary-color: #d958ea;
    --accent-color: #40444B;
    --dark-color: #1B1B1f;
    --light-color: #fff;
    --dark-0: #40444B;
    --dark-1: #36393F;
    --dark-2: #32353B;
    --dark-3: #292B2F;
    --dark-4: #202225;
    --gray-0: gray;

    /* Light */
    --hljs-background-light: #f1f1f1;
    --hljs-subst-color-light: #3c3836;
    --gruvbox-red-light: #fb4934;
    --gruvbox-blue-light: #076678;
    --gruvbox-yellow-light: #b57614;
    --gruvbox-purple-light: #8f3f71;
    --gruvbox-orange-light: #af3a03;
    --gruvbox-green-light: #79740e;
    --gruvbox-aqua-light: #427b58;
    --gruvbox-gray-light: #928374;
    --gruvbox-purple-lighter-light: #8f3f71;

    --bg-color-light: var(--light-color);
    --text-color-light: var(--dark-color);
    --border-color-light: var(--dark-color);

    /* Dark */
    --hljs-background-dark: var(--dark-3);
    --hljs-subst-color-dark: #c7c7c7;
    --gruvbox-red-dark: #e7784e;
    --gruvbox-blue-dark: #83a598;
    --gruvbox-yellow-dark: #fabd2f;
    --gruvbox-purple-dark: #8f3f71;
    --gruvbox-orange-dark: #fe8019;
    --gruvbox-green-dark: #267dbb;
    --gruvbox-aqua-dark: #8ec07c;
    --gruvbox-gray-dark: #928374;
    --gruvbox-purple-lighter-dark: #a7a2ff;

    --bg-color-dark: var(--dark-color);
    --text-color-dark: var(--light-color);
    --border-color-dark: var(--light-color);

    /* Dimensions */
    --nav-height: 48px;
    --footer-height: 100px;
    /* Spacing */
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Default font */
html, body {
    height: 100%;
    font-size: 1rem;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

.loading * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

/* Light mode */
body {
    /* Highlight.js */
    --hljs-background: var(--hljs-background-light);
    --hljs-subst-color: var(--hljs-subst-color-light);
    --gruvbox-red: var(--gruvbox-red-light);
    --gruvbox-blue: var(--gruvbox-blue-light);
    --gruvbox-yellow: var(--gruvbox-yellow-light);
    --gruvbox-purple: var(--gruvbox-purple-light);
    --gruvbox-orange: var(--gruvbox-orange-light);
    --gruvbox-green: var(--gruvbox-green-light);
    --gruvbox-aqua: var(--gruvbox-aqua-light);
    --gruvbox-gray: var(--gruvbox-gray-light);
    --gruvbox-purple-lighter: var(--gruvbox-purple-lighter-light);

    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --border-color: var(--border-color-light);
}

/* Dark mode */
body.dark-mode {
    /* Highlight.js */
    --hljs-background: var(--hljs-background-dark);
    --hljs-subst-color: var(--hljs-subst-color-dark);
    --gruvbox-red: var(--gruvbox-red-dark);
    --gruvbox-blue: var(--gruvbox-blue-dark);
    --gruvbox-yellow: var(--gruvbox-yellow-dark);
    --gruvbox-purple: var(--gruvbox-purple-dark);
    --gruvbox-orange: var(--gruvbox-orange-dark);
    --gruvbox-green: var(--gruvbox-green-dark);
    --gruvbox-aqua: var(--gruvbox-aqua-dark);
    --gruvbox-gray: var(--gruvbox-gray-dark);
    --gruvbox-purple-lighter: var(--gruvbox-purple-lighter-dark);

    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --border-color: var(--border-color-dark);
}

/* Scrollbar */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: var(--primary-color);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--dark-color);
    border-radius: 20px;
    border: 2px solid var(--primary-color);
}

body {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
}

body {
    background: radial-gradient(
            95% 95% at 50% 5%,
            var(--bg-color) 0%,
            var(--bg-color) 100%
    );
    color: var(--text-color)
}

body.menu-open {
    overflow: hidden;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
section,
summary {
    display: block;
}

a,
a:visited,
a:active,
a:hover {
    text-decoration: none;
}

a:active,
a:hover {
    color: var(--primary-color);
    cursor: pointer;
}

.loader {
    position: fixed;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background-color: var(--primary-color);
    pointer-events: none;
    visibility: hidden;
    transition: all 1s ease-out;
}

body.loading .loader {
    top: 0;
    visibility: visible;
}

.app {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    transform-origin: center 50vh;
    overflow: hidden;
    pointer-events: none;
}

.page-container {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: transparent;
    pointer-events: all;
}

.page {
    min-height: 100vh;
    margin: var(--nav-height);
    position: relative;
    z-index: 0;
    background: transparent;
    overflow: hidden;
}

/* Empty state */

.empty-state {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.empty-state svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    fill: var(--text-color);
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.6;
}

.empty-state p {
    font-size: 0.9rem;
    opacity: 0.4;
}

/* Effects */

.purple-shadow {
    box-shadow: 0 28px 37px -17px rgba(var(--primar-color-rgb), .2);
    -webkit-box-shadow: 0 28px 37px -17px rgba(var(--primar-color-rgb), .2);
    -moz-box-shadow: 0 28px 37px -17px rgba(var(--primar-color-rgb), .2);
}

/* Highlight.js theme */

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: var(--hljs-background);
}

.hljs,
.hljs-subst {
    color: var(--hljs-subst-color);
}

/* Red */
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
    color: var(--gruvbox-red);
}

/* Blue */
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
    color: var(--gruvbox-blue);

}

/* Yellow */
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
    color: var(--gruvbox-yellow);

}

/* Purple */
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
    color: var(--gruvbox-purple);
}

/* Orange */
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
    color: var(--gruvbox-orange);
}

/* Green */
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
    color: var(--gruvbox-green);
}

/* Aqua */
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
    color: var(--gruvbox-aqua);
}

/* Gray */
.hljs-comment {
    color: var(--gruvbox-gray);
}

/* Purple */
.hljs-link_label,
.hljs-literal,
.hljs-number {
    color: var(--gruvbox-purple-lighter);
}

.hljs-comment,
.hljs-emphasis {
    font-style: italic;
}

.hljs-section,
.hljs-strong,
.hljs-tag {
    font-weight: bold;
}