[data-theme="light"] {
    --background: #fefefe;
    --accent: #E4E4E7;
    --text: #505050;
    --title: #000000; /* Used for highlighted text and the home page */
    --shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
    --background: #18181B;
    --accent: #424242;
    --text: #bdbdbd;
    --title: #ffffff;
    --shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

:root {
    --primary: var(--default); /* Used as the tech color - set in the Navbar component */
    --default: #5E17EB;
    --codeBackground: #0D1117; /* Background color for <pre> and <code> tags */
    --codeText: #FFFFFF; /* Ensures code text is visible in light mode, since --text would blend into the background */
}

h1, h2, h3, h4, h5, h6, strong {
    color: var(--title); /* Highlights all titles for better visibility */
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    background-color: var(--background);
    transition: background-color ease-in-out 0.2s;
    color: var(--text);
    margin: 0;
    scroll-behavior: smooth;
    overflow-y: hidden; /* Disables body scrollbar since sidebar, content and rightbar have their own */
}

* {
    margin: 0;
    box-sizing: border-box;
}

.hover:hover {
    color: var(--primary);
    cursor: pointer;
    transition: all 0.1s ease;
    transform: scale(1.1);
}

a {
    color: inherit;
    text-decoration: none;
}

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