:root {
    --nav-height: 50px;
}

:root[data-theme="light"] {
    --color-bg: #FFFFFF;

    --color-primary: black;
    --color-secondary: gray;
    --color-tertiary: #757575;

    --color-accent: #8A4FFF;
    --color-anti-accent: white;
    --color-accent-weak: #E6DFFF;

    --color-shade: lightgray;
    --color-subtle: #F2F2F2;

    --color-link: var(--color-accent);
    --color-error: #ff8080;
}

:root[data-theme="dark"] {
    --color-bg: #1E201E;

    --color-primary: #f8fce6;
    --color-secondary: #A2A2A2;

    --color-accent: #8A4FFF;
    --color-anti-accent: white;
    --color-accent-weak: #3c354a;

    --color-shade: #545747;
    --color-subtle: #2d2e2b;

    --color-link: #aa83fc;
    --color-error: #ff8080;
}

:root[data-theme="black"] {
    --color-bg: #000000;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

    --gap-tiny: 4px;
    --gap-small: 8px;
    --gap-medium: 16px;
    --gap-large: 32px;
    --gap-huge: 64px;

    --border-radius: 8px;

    background-color: var(--color-bg);
    color: var(--color-primary);
}

/* Hide scrollbars globally for Chrome, Safari and Opera */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* For Firefox - hide scrollbars */
html {
    scrollbar-width: none;
}

media-player::-webkit-scrollbar,
media-player *::-webkit-scrollbar,
video::-webkit-scrollbar {
    display: none !important;
}

pre {
    white-space: pre-wrap;
    font-family: inherit;
}

a {
    color: var(--color-link);
}

textarea {
    font-size: 0.9rem;
    box-sizing: border-box;
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-shade);
}

textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

i, button {
    color: var(--color-primary);
}

::selection {
  background: var(--color-accent-weak);
}

hr {
    color: var(--color-subtle);
}

.muted {
    color: var(--color-secondary);
}

.squash {
    padding-left: var(--gap-small);
    padding-right: var(--gap-small);
}