/* Variables */
:root {
    /* Colors */
    --color-white: #f5f5f5;
    --color-gray: #191a2c;
    --color-midnight: #19284f;
    --color-blue: #1261d1;
    --color-aqua: #05d9e8;
    --color-green: #20c997;
    --color-yellow: #defe47;
    --color-orange: #ff6e27;
    --color-purple: #af43be;
    --color-pink: #ff577d;
    --color-red: #f33;
    --color-error: #ff2a6d;
    --color-warning: #ffcc02;
    --color-success: #65dc98;
    /* Fonts */
    --font-default: 'News Cycle', sans-serif;
    --font-heading: 'Quicksand', cursive;
    --font-description: 'Open Sans Condensed', sans-serif;
    --font-poiret: 'Poiret One', cursive;
}

/* Theme Colors */
.light-theme {
    --color-bg: #f5f5f5;
    --color-control-bg: #ffffff;
    --color-control-accent-bg: #dcdcdc;
    --color-control-focus-bg: #ffffff;
    --color-text: #191a2c;
    --color-badge: #191a2c;
    --color-badge-text: #f5f5f5;
}

.dark-theme {
    --color-bg: #191a2c;
    --color-control-bg: #303041;
    --color-control-accent-bg: #474756;
    --color-control-focus-bg: #5E5E6B;
    --color-text: #f5f5f5;
    --color-badge: #f5f5f5;
    --color-badge-text: #303041;
}

/* Global Application */
* {
    transition: 0.25s all linear;
}

html,
body {
    margin: 0;
    height: 100%;
    background-color: var(--color-bg);
    color: var(--color-text);
}