:root {
    /* main colors */
    --color-black: #060F11;
    --color-white: #e8e8e8;
    --color-green: #1a9782;
    --color-green-dark: #127060;
    --color-green-soft: #1a978226;
    --color-charcoal: #222B2F; 
    --color-steel: #64748B;
    --color-ink: #121B1D;
    --color-ink-dark: #1A2225;
    --color-ink-mid: #2C3335;
    --color-slate: #606874;
    --color-yellow: #d49e2b;
    --color-red: #aa4242;
    --color-red-dark: #3B1A1C;
    --color-indigo: #445061;
    --color-forest-dark: #092421;
    --color-fog-grey: #6B7578;

    --color-green-tint: rgba(26, 151, 130, 0.2);
    --color-green-fade: rgba(26, 151, 130, 0.15);
    --color-yellow-tint: rgba(249, 189, 26, 0.24);
    --color-red-tint: rgba(229, 114, 114, 0.2);
    --color-slate-fade: rgba(81, 92, 94, 0.644);
    --color-steel-soft: rgba(100, 116, 139, 0.082);
    --color-black-fade: rgba(6, 15, 17, 0.6);
    --color-blue-clear: rgba(29, 78, 216, 0);
    
    /* chart */
    --chart-horizontal-line: rgba(34, 43, 47, 0.40);
    --chart-vertical-line-top: rgba(232, 232, 232, 0.00);
    --chart-vertical-line-bottom: rgba(232, 232, 232, 0.60);
    
    /* dropdown */
    --color-dropdown-bg: var(--color-ink);
    --color-dropdown-text: var(--color-white);
    --color-dropdown-text-secondary: var(--color-indigo);
    --dropdown-box-shadow: none;

    /* notification */
    --notification-box-shadow: none;
    --notification-theme-def: #e8e8e8;
    --notification-theme-red: #e8e8e8;

    /* checkbox */
    --checkbox-border-color: var(--color-steel);

    /* button */
    --button-color: #fff;

    /* 404 */
    --title-color-404: var(--color-steel);
    --text-color-404: var(--color-white);

    /* forms */
    --bg-form: var(--color-ink);
    --border-color-form: var(--color-charcoal);
    --shadow-color-form: transparent;

    /* icons */
    --icon-green: var(--color-green);
    --icon-black: var(--color-black);
    --icon-gainsboro: var(--color-white);
    --icon-slategray: var(--color-steel);
    --icon-firebrick: var(--color-red);

    /* GH */
    --github-color: var(--icon-gainsboro);

    /* assets */
    --assets-color-green: #1a9782;
    --assets-color-yellow: #f7931a;
    --assets-color-gray: #8c8c8c;
    --assets-color-blue: #0098eb;
    --assets-color-dark-blue: #004b9d;
    --assets-color-red: #aa4242;

    /* top bar */
    --top-bar-bg: #FDF3D1;
    --top-bar-text: #716336;
    --top-bar-link: #6DA1D3;
    
    /* copy */
    --color-copy-bg: var(--color-dropdown-bg);
    --copy-box-shadow: none;
}

:root[data-theme="light"] {
    /* main colors */
    --color-black: #fff;
    --color-white: #020617;
    --color-green: #1a9782;
    --color-green-dark: #127060;
    --color-green-soft: #1a978226;
    --color-charcoal: #D2D6DD;
    --color-steel: #8C9096;
    --color-ink: #F2F5F8;
    --color-ink-dark: #E5E7EB;
    --color-ink-mid: #D2D6DD;
    --color-slate: #606874;
    --color-yellow: #d49e2b;
    --color-red: #aa4242;
    --color-red-dark: #3B1A1C;
    --color-indigo: #445061;
    --color-fog: #E2E8F0;
    --color-forest-dark: #D1EAE6;
    --color-fog-grey: #6B7578;

    --color-green-tint: rgba(26, 151, 130, 0.2);
    --color-green-fade: rgba(26, 151, 130, 0.15);
    --color-yellow-tint: rgba(249, 189, 26, 0.24);
    --color-red-tint: rgba(229, 114, 114, 0.2);
    --color-slate-fade: rgba(81, 92, 94, 0.644);
    --color-steel-soft: rgba(100, 116, 139, 0.082);
    --color-black-fade: rgba(6, 15, 17, 0.6);
    --color-blue-clear: rgba(29, 78, 216, 0);
    
    /* chart */
    --chart-horizontal-line: #E2E8F0;
    --chart-vertical-line-top: rgba(26, 151, 130, 0.00);
    --chart-vertical-line-bottom: rgba(26, 151, 130, 0.60);
    
    /* dropdown */
    --color-dropdown-bg: var(--color-black);
    --color-dropdown-text: var(--color-white);
    --color-dropdown-text-secondary: var(--color-steel);
    --dropdown-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);

    /* notification */
    --notification-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10);
    --notification-theme-def: #020617;
    --notification-theme-red: #fff;

    /* checkbox */
    --checkbox-border-color: var(--color-ink-dark);

    /* button */
    --button-color: #fff;

    /* 404 */
    --title-color-404: var(--color-steel);
    --text-color-404: var(--color-white);

    /* forms */
    --bg-form: var(--color-black);
    --border-color-form: var(--color-fog);
    --shadow-color-form: rgba(0, 0, 0, 0.05);

    /* icons */
    --icon-green: var(--color-green);
    --icon-black: var(--color-black);
    --icon-gainsboro: var(--color-white);
    --icon-slategray: var(--color-steel);
    --icon-firebrick: var(--color-red);

    /* GH */
    --github-color: var(--icon-gainsboro);

    /* assets */
    --assets-color-green: #1a9782;
    --assets-color-yellow: #f7931a;
    --assets-color-gray: #8c8c8c;
    --assets-color-blue: #0098eb;
    --assets-color-dark-blue: #004b9d;
    --assets-color-red: #aa4242;

    /* top bar */
    --top-bar-bg: #FDF3D1;
    --top-bar-text: #716336;
    --top-bar-link: #6DA1D3;
    
    /* copy */
    --color-copy-bg: var(--color-dropdown-bg);
    --copy-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.073);
}