/* ==========================================================================
   Design System Tokens, Reset, & Typography
   ========================================================================== */

:root {
    /* Color Palette */
    --background-color: #111111;
    --bg-dark: #2b2b2b;
    --bg-charcoal: #242424;
    --bg-alt: #1a1a1a;
    --bg-deep: #151515;

    --text-color: #ebebeb;
    --text-light: #f4f4f4;
    --text-dark: #1a1a1a;
    --text-muted: #aaaaaa;
    --text-silver: #999999;

    --text-pure: #ffffff;
    --text-grey-dark: #888888;
    --text-placeholder: #666666;
    --text-footer-credits: #777777;
    --bg-header: #2d2d2d;
    --bg-drawer-row: #1d1d1d;
    --bg-drawer-hover: #2d2d2d;
    --border-light: #444444;
    --border-color: #333333;
    --border-footer: #3d3d3d;
    --nav-link-hover: #a5a5a5;
    --btn-hover-grey: #e0e0e0;

    --accent-color: #ad0000;
    --accent-color-highlight: #cc0000;
    --accent-hover-bright: #ff3333;
    --accent-deep-hover: #900000;
}

/* ----- Base Resets ----- */
body {
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
}

/* ----- Typography ----- */
.comic-neue-light {
    font-family: "Comic Neue", cursive;
    font-weight: 300;
    font-style: normal;
}

.comic-neue-regular {
    font-family: "Comic Neue", cursive;
    font-weight: 400;
    font-style: normal;
}

.comic-neue-bold {
    font-family: "Comic Neue", cursive;
    font-weight: 700;
    font-style: normal;
}

.comic-neue-light-italic {
    font-family: "Comic Neue", cursive;
    font-weight: 300;
    font-style: italic;
}

.comic-neue-regular-italic {
    font-family: "Comic Neue", cursive;
    font-weight: 400;
    font-style: italic;
}

.comic-neue-bold-italic {
    font-family: "Comic Neue", cursive;
    font-weight: 700;
    font-style: italic;
}